发送到的每个请求http://example.com/?s=string
将导致搜索查询,WordPress将使用search.php
渲染输出。请求来自哪里并不重要。
如果需要进行AJAX搜索,则必须编写自己的函数进行搜索,然后返回。我有个答案here, 全面解释如何在WordPress安装中实现AJAX。
按照说明编写您自己的查询,如下所示进行搜索:
$args = array(
\'s\' => $string // This is how a search functions
\'posts_per_page\' => 4
);
$query = new WP_Query($args);
// Now save your query in an array using a loop and return it
要进行实时搜索,必须将操作绑定到
keyup
或
keydown
使用jQuery。您还可以检查用户的输入值,因为搜索少于3个字符的字符串并不总是一个好主意。
因此,假设您正在跟踪链接的答案,并且输入的ID为my-ajax-search
, 这将在用户每次输入超过3个字符的内容时发送AJAX请求,并将结果附加到ID为的元素中$ajax-results
:
(function($){
$(\'#my-ajax-search\').on(\'keyup\',function(){
var searchString = $(this).value();
// Check the input value\'s length
if (searchString .length > 3) {
$.get( \'http://example.com/wpnovice/ajax_search/\', {
ajaxString: searchString
}).done( function( response ) {
if ( response != null) {
$.each(response, function(index, el) {
$(\'#ajax-results\').append(
\'<a href="\'+el.url+\'">\'+
\'<img src="\'+el.thumbnail+\'" alt="\'+el.title+\'"/>\'+
\'<span>\'+el.title+\'</span>\'+
\'</a>\'
);
});
}
});
}
});
})(jQuery);
现在,让我们在后端注册一个REST路由并返回搜索查询:
add_action( \'rest_api_init\', function () {
//Path to AJAX endpoint
register_rest_route( \'wpnovice\', \'/ajax_search/\', array(
\'methods\' => \'GET\',
\'callback\' => \'wpnovice_ajax_search\'
) );
});
function wpnovice_ajax_search() {
if (isset($_GET[\'ajaxString\'])) {
$string = $_GET[\'ajaxString\'];
$ajax_search = new WP_Query(array(
\'posts_per_page\' => 8,
\'s\' => $string,
));
if ($ajax_search->have_posts()){
while ($ajax_search->have_posts()){
$ajax_search->the_post();
$data_inner[\'title\'] = get_the_title();
$data_inner[\'url\'] = get_the_permalink();
if (has_post_thumbnail()) {
$data_inner[\'thumbnail\'] = get_the_post_thumbnail_url(get_the_ID(),\'thumbnail\');
}
$search_result[$ajax_search->current_post] = $data_inner;
}
return $search_result;
} else {
return null;
}
} else {
return __(\'You must enter a string to search\',\'text-domain\');
}
}