Выберите 2 результата ajax с группой
Я пытаюсь отобразить выбор 2 результатов поиска ajax с группами. Но это не показывает никаких результатов. Я использую WordPress Ajax для этого.
Вот мой код JS,
jQuery('select.select2-group_filters-dropdown').select2({
//placeholder: "Select pages / post / categories",
ajax: {
url: ajaxurl,
dataType: 'json',
method: 'post',
delay: 250,
data: function (params) {
return {
q: params.term, // search term
page: params.page,
action: 'cp_get_posts_by_query'
};
},
results: function (data, page) {
return {results: data};
},
processResults: function (data) {
return {
results: data
};
},
cache: true
},
minimumInputLength: 0,
});
данные, которые я возвращаю из PHP как,
$searchString = $_POST['q'];
$childdata = array();
$query = new WP_Query( array( 's' => $searchString ) );
if ( $query->have_posts() ) {
while ( $query->have_posts() ) {
$query->the_post();
$title = get_the_title();
$ID = get_the_id();
$childdata[] = array('id' => "post-".$ID, 'text' => $title );
}
} else {
$data[] = array('id' => '0', 'text' => 'No results Found');
}
$data = array(
"text" => "posts",
"children" => $childdata
);
wp_reset_postdata();
// return the result in json
echo json_encode( $data );
die();
Это не работает, как ожидалось. Возвращает ноль результатов. Пожалуйста, помогите мне с этим.
Решение
Если вы получаете данные из серверной части, то проблема в конфигурации select2.
Попробуйте сначала выполнить ajax-вызов, а затем заполнить select2 данными. Примерно так (не уверен, что это сработает для вас, я не могу проверить это здесь):
jQuery.ajax({
url: ajaxurl,
dataType: 'json',
method: 'post',
delay: 250,
data: function (params) {
return {
q: params.term, // search term
page: params.page,
action: 'cp_get_posts_by_query'
}
}
}).done(function( data ) {
jQuery('select.select2-group_filters-dropdown').select2({ data:data, minimumInputLength: 0});});
Другие решения
$('.select2').select2({
allowClear: true,
ajax: {
url: function (params) {
return "api/endpoint/?user=" + params.term;
},
dataType: 'json',
delay: 500,
processResults: function (data) {
return {
results: $.map(data, function (item) {
return {
/* NOTE: return in this format i.e.
* key = **text** : value = username
* key = **id** : value = id
*/
text: item.username,
id: item.id
}
})
};
},
minimumInputLength: 1,
minimumInputLength: 3,
cache: true,
escapeMarkup: function (markup) {
return markup;
},
templateResult: function (item) {
return item.username;
},
templateSelection: function (item) {
return item.username;
},
}
});