jQuery Wordpress 的自动完成正在搜索每个 post 类型
jQuery Autocomplete with Wordpress is searching every post type
我设置了一个搜索字段,用户可以在其中使用 jquery 自动完成功能搜索商品和服务。
它从我的 wordpress 数据库中获取 post 非常有效,但它从 wp_posts table.[=15= 中提取每个 post ]
所以它从其他 post 类型中引入 posts,而不仅仅是我想要的那种商品和服务。
function my_search() {
global $post;
ob_start();
$term = strtolower( $_GET['term'] );
$suggestions = array();
$args = array(
'post_type' => 'goods_services',
'posts_per_page' => '-1'
);
$query = new WP_Query( 's=' . $term, $args );
if ( $query->have_posts() ) {
while( $query->have_posts() ) {
$query->the_post();
$suggestion = array();
$suggestion['label'] = get_the_title();
$suggestion['category'] = get_field('service_class');
$suggestions[] = $suggestion;
}
$response = ob_get_clean();
wp_reset_postdata();
$response = json_encode( $suggestions );
echo $response;
exit();
}
}
add_action( 'wp_ajax_my_search', 'my_search' );
add_action( 'wp_ajax_nopriv_my_search', 'my_search' );
这是我在 functions.php 中调用表单搜索查询的代码。
这是我的搜索表单自动完成代码。它有一堆添加的自定义渲染内容,但来源正在获取 functions.php 片段。
(function( $ ) {
$(function() {
var url = MyAutocomplete.url + "?action=my_search";
function split( val ) {
return val.split( /,\s*/ );
}
function extractLast( term ) {
return split( term ).pop();
}
function log( message ) {
var dataClass = message.split(':');
$( "<li class='selected-results_item'>" ).attr( "data-id", message ).attr("data-class", dataClass[0]).text( message ).prependTo( ".selected-results" );
}
// Wrap Search Results Groups
function wrapSearchCategory() {
var categories = {};
$('.search-results > ul > li').each(function(){
categories[$(this).data('class')] = "";
});
for (category in categories) {
$('.search-results > ul > li').filter('[data-class="'+ category +'"]').wrapAll('<div class="results-group ready" data-class="'+ category +'"></div');
}
}
// Wrap Results Groups
function wrapResultsCategory() {
var resultsItem = $('.selected-results_item').data('class');
if ($('.selected-results div[data-class="'+resultsItem+'"]').length) {
$('.selected-results_item[data-class="'+resultsItem+'"]').appendTo('.selected-results > .results-group[data-class="'+resultsItem+'"]');
}
else {
var categories = {};
$('.selected-results > .selected-results_item').each(function(){
categories[$(this).data('class')] = "";
});
for (category in categories) {
$('.selected-results > .selected-results_item').filter('[data-class="'+ category +'"]').wrapAll('<div class="results-group" data-class="'+ category +'"></div');
}
}
// Add category title to groups
$(".selected-results > .results-group").each(function() {
if ($(this).children('.results-category').length){
return false;
}
else {
$(this).prepend('<li class="results-category" data-class="'+ category +'">'+ category +'<span class="show-more"></span></li>');
}
});
// Add category title to groups
$(".selected-results > .results-group").each(function() {
if ($(this).children('.results-category').length){
return false;
}
else {
$(this).prepend('<li class="results-category" data-class="'+ category +'">'+ category +'<span class="show-more"></span></li>');
}
});
}
// Show class category
$.widget( "custom.catcomplete", $.ui.autocomplete, {
_create: function() {
this._super();
this.widget().menu( "option", "items", "> :not(.results-category)" );
},
_renderMenu: function( ul, items ) {
var that = this,
currentCategory = "";
$.each( items, function( index, item ) {
var li;
if ( item.category != currentCategory ) {
ul.append( "<li class='results-category' data-class='"+ item.category +"'>" + item.category + "<span class='show-more'></span></li>" );
currentCategory = item.category;
}
li = that._renderItemData( ul, item );
if ( item.category ) {
li.attr( "data-item", item.category + ": " + item.label );
}
});
},
_renderItem: function( ul, item ) {
return $( "<li>" )
.attr( "data-class", item.category )
.attr( "data-value", item.value )
.append( $( "<a>" ).text( item.label ) )
.appendTo( ul );
}
});
$("#autocomplete")
// don't navigate away from the field on tab when selecting an item
.on( "keydown", function( event ) {
if ( event.keyCode === $.ui.keyCode.TAB &&
$( this ).autocomplete( "instance" ).menu.active ) {
event.preventDefault();
}
})
.catcomplete({
source: url,
appendTo: ".search-results",
search: function() {
// custom minLength
var term = extractLast( this.value );
if ( term.length < 2 ) {
return false;
}
setTimeout(function() {
wrapSearchCategory();
}, 1000);
},
focus: function() {
// prevent value inserted on focus
return false;
},
select: function( event, ui ) {
log(ui.item.category + ': ' + ui.item.value);
setTimeout(function() {
wrapResultsCategory();
update();
}, 150);
return false;
},
close: function (event, ui) {
if (!$("ul.ui-autocomplete").is(":visible")) {
$("ul.ui-autocomplete").show();
}
}
});
});
})( jQuery );
我不明白为什么我的 $query
没有提取 post_type 的参数。它几乎完全忽略它。
我必须 运行 我的 args 在术语之前,所以我在 args 中包含了搜索术语。
$args = array(
's' => $term,
'post_type' => 'goods_services',
'posts_per_page' => '-1'
);
$query = new WP_Query( $args );
我设置了一个搜索字段,用户可以在其中使用 jquery 自动完成功能搜索商品和服务。
它从我的 wordpress 数据库中获取 post 非常有效,但它从 wp_posts table.[=15= 中提取每个 post ]
所以它从其他 post 类型中引入 posts,而不仅仅是我想要的那种商品和服务。
function my_search() {
global $post;
ob_start();
$term = strtolower( $_GET['term'] );
$suggestions = array();
$args = array(
'post_type' => 'goods_services',
'posts_per_page' => '-1'
);
$query = new WP_Query( 's=' . $term, $args );
if ( $query->have_posts() ) {
while( $query->have_posts() ) {
$query->the_post();
$suggestion = array();
$suggestion['label'] = get_the_title();
$suggestion['category'] = get_field('service_class');
$suggestions[] = $suggestion;
}
$response = ob_get_clean();
wp_reset_postdata();
$response = json_encode( $suggestions );
echo $response;
exit();
}
}
add_action( 'wp_ajax_my_search', 'my_search' );
add_action( 'wp_ajax_nopriv_my_search', 'my_search' );
这是我在 functions.php 中调用表单搜索查询的代码。
这是我的搜索表单自动完成代码。它有一堆添加的自定义渲染内容,但来源正在获取 functions.php 片段。
(function( $ ) {
$(function() {
var url = MyAutocomplete.url + "?action=my_search";
function split( val ) {
return val.split( /,\s*/ );
}
function extractLast( term ) {
return split( term ).pop();
}
function log( message ) {
var dataClass = message.split(':');
$( "<li class='selected-results_item'>" ).attr( "data-id", message ).attr("data-class", dataClass[0]).text( message ).prependTo( ".selected-results" );
}
// Wrap Search Results Groups
function wrapSearchCategory() {
var categories = {};
$('.search-results > ul > li').each(function(){
categories[$(this).data('class')] = "";
});
for (category in categories) {
$('.search-results > ul > li').filter('[data-class="'+ category +'"]').wrapAll('<div class="results-group ready" data-class="'+ category +'"></div');
}
}
// Wrap Results Groups
function wrapResultsCategory() {
var resultsItem = $('.selected-results_item').data('class');
if ($('.selected-results div[data-class="'+resultsItem+'"]').length) {
$('.selected-results_item[data-class="'+resultsItem+'"]').appendTo('.selected-results > .results-group[data-class="'+resultsItem+'"]');
}
else {
var categories = {};
$('.selected-results > .selected-results_item').each(function(){
categories[$(this).data('class')] = "";
});
for (category in categories) {
$('.selected-results > .selected-results_item').filter('[data-class="'+ category +'"]').wrapAll('<div class="results-group" data-class="'+ category +'"></div');
}
}
// Add category title to groups
$(".selected-results > .results-group").each(function() {
if ($(this).children('.results-category').length){
return false;
}
else {
$(this).prepend('<li class="results-category" data-class="'+ category +'">'+ category +'<span class="show-more"></span></li>');
}
});
// Add category title to groups
$(".selected-results > .results-group").each(function() {
if ($(this).children('.results-category').length){
return false;
}
else {
$(this).prepend('<li class="results-category" data-class="'+ category +'">'+ category +'<span class="show-more"></span></li>');
}
});
}
// Show class category
$.widget( "custom.catcomplete", $.ui.autocomplete, {
_create: function() {
this._super();
this.widget().menu( "option", "items", "> :not(.results-category)" );
},
_renderMenu: function( ul, items ) {
var that = this,
currentCategory = "";
$.each( items, function( index, item ) {
var li;
if ( item.category != currentCategory ) {
ul.append( "<li class='results-category' data-class='"+ item.category +"'>" + item.category + "<span class='show-more'></span></li>" );
currentCategory = item.category;
}
li = that._renderItemData( ul, item );
if ( item.category ) {
li.attr( "data-item", item.category + ": " + item.label );
}
});
},
_renderItem: function( ul, item ) {
return $( "<li>" )
.attr( "data-class", item.category )
.attr( "data-value", item.value )
.append( $( "<a>" ).text( item.label ) )
.appendTo( ul );
}
});
$("#autocomplete")
// don't navigate away from the field on tab when selecting an item
.on( "keydown", function( event ) {
if ( event.keyCode === $.ui.keyCode.TAB &&
$( this ).autocomplete( "instance" ).menu.active ) {
event.preventDefault();
}
})
.catcomplete({
source: url,
appendTo: ".search-results",
search: function() {
// custom minLength
var term = extractLast( this.value );
if ( term.length < 2 ) {
return false;
}
setTimeout(function() {
wrapSearchCategory();
}, 1000);
},
focus: function() {
// prevent value inserted on focus
return false;
},
select: function( event, ui ) {
log(ui.item.category + ': ' + ui.item.value);
setTimeout(function() {
wrapResultsCategory();
update();
}, 150);
return false;
},
close: function (event, ui) {
if (!$("ul.ui-autocomplete").is(":visible")) {
$("ul.ui-autocomplete").show();
}
}
});
});
})( jQuery );
我不明白为什么我的 $query
没有提取 post_type 的参数。它几乎完全忽略它。
我必须 运行 我的 args 在术语之前,所以我在 args 中包含了搜索术语。
$args = array(
's' => $term,
'post_type' => 'goods_services',
'posts_per_page' => '-1'
);
$query = new WP_Query( $args );