Autocomplete: Как выводить определенное кол-во элементов для одной категории?
238
08 февраля 2018, 16:04
Помогите выводить нужное кол-во элементов в категории. Например 3 для каждой категории.
Я пробую итерировать items в _renderMenu, item в _renderItemData и в результатах аякс запроса. Все в бестолку.
Использую этот плагин.
в data у меня массив из хешей:
data = [{ label: "item", category: "category" }, { label: "item", category: "category" }]
Вот код
$.widget("custom.catcomplete", $.ui.autocomplete, {
_renderMenu: function(ul, items) {
var self = this,
currentCategory = "";
$.each(items, function(index, item) {
if (item.category != currentCategory) {
ul.append("<li style='clear:both'class='ui-autocomplete-category'>" + item.category + "</li>");
currentCategory = item.category;
}
self._renderItemData(ul, item);
});
}
});
$( document ).ready(function() {
$( 'input[name="query"]' ).catcomplete({
delay: 500,
minLength: 4,
source: function(request, response){
$.ajax({
type: "GET",
url: "/autocomplete.json",
dataType: "json",
data:{ query: request.term },
success: function(data){
if (data.length > 0) {
response( $.map( data, function( item ) {
return {
label: item.label,
id: item.id,
category: item.category,
value: item.value
}
}));
}else{
response([{ category: 'No results found', label:""}]);
}
}
});
}
});
});
Answer 1
Вот модифицированный пример, на который вы ссылаетесь.
когда получите данные data, просто отфильтруйте записи подсчитывая число элементов в категории:
var ccount = {} ;
var itemsPerCategory = 2;
data = data.filter(function(item){
if(! ( item.category in ccount)){
ccount[item.category] = 0;
}
return ccount[item.category]++ < itemsPerCategory;
}));
а дальше уже делайте, что хотели.
$( function() {
$.widget( "custom.catcomplete", $.ui.autocomplete, {
_create: function() {
this._super();
this.widget().menu( "option", "items", "> :not(.ui-autocomplete-category)" );
},
_renderMenu: function( ul, items ) {
var that = this,
currentCategory = "";
$.each( items, function( index, item ) {
var li;
if ( item.category != currentCategory ) {
ul.append( "<li class='ui-autocomplete-category'>" + item.category + "</li>" );
currentCategory = item.category;
}
li = that._renderItemData( ul, item );
if ( item.category ) {
li.attr( "aria-label", item.category + " : " + item.label );
}
});
}
});
var data = [
{ label: "anders", category: "" },
{ label: "andreas", category: "" },
{ label: "antal", category: "" },
{ label: "annhhx10", category: "Products" },
{ label: "annk K12", category: "Products" },
{ label: "annttop C13", category: "Products" },
{ label: "anders andersson", category: "People" },
{ label: "andreas andersson", category: "People" },
{ label: "andreas johnson", category: "People" }
];
var itemsPerCategory = 2;
$( "#search" ).catcomplete({
delay: 0,
source: function(request, response){
var ccount = {} ;
response(data.filter(function(item){
if(! ( item.category in ccount)){
ccount[item.category] = 0;
}
return ccount[item.category]++ < itemsPerCategory;
}));
}
});
} );<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<input id="search">
ТОП-10
- Почему SERVER_ADDR имеет не тот IP 47699 visits
- Как заменить $_SERVER[REMOTE_ADDR] на IP клиента в PHP за двумя Nginx? 30546 visits
- Хочу вывести несколько строк из массива в один div, выводит только много undefined; подскажите, что делать? 23726 visits
- Как через css изменить цвет png изображения? 10373 visits
- Blob video url download 9981 visits
- Php curl запрос через прокси с авторизацией 9240 visits
- Работа с captcha vk api 8117 visits
© "hostciti.net" 27.1.2025 | 06:55