JQuery автозаполнения: элементы скрыть, основанные на ID

Question

У меня есть массив с некоторыми объектами, которые имеют такое же свойство «ID», как это:

var regions = [ 
    {'id': 1, 'value': 'Ankara'}, 
    {'id': 2, 'value': 'İstanbul'}, 
    {'id': 2, 'value': 'Istanbul'} 
] 

я стараюсь, чтобы отобразить только первый объект определенного ID, если (в данном случае я хочу отобразить «Стамбул», но не «Стамбул»). Я пытался использовать функцию внутри свойства источника, но мне не удалось, и я не уверен, чтобы понять, где я должен это сделать ... Вот отрывок:

var regions = [ 
 
\t {'id': 1, 'value': 'Ankara'}, 
 
\t {'id': 2, 'value': 'İstanbul'}, 
 
\t {'id': 2, 'value': 'Istanbul'} 
 
] 
 

 
$('#myInput').autocomplete({ 
 
\t source: regions 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script> 
 
<input type="text" placeholder="type here ..." id="myInput">

Любой помощь будет оценена. Спасибо.

Answer 1

Это может быть ваше решение. Я создал одну функцию, которая удалит дубликаты из массива на основе свойства. Функция добавит уникальный объект к uniqueArray, все последующие элементы с одинаковым идентификатором игнорируются.

После этого я передал uniqueArray в автозаполнение jQuery.

Имейте в виду Array.reduce работает на IE9 +

Не стесняйтесь спросить, если у вас есть какие-либо вопросы.

var regions = [ 
 
\t {'id': 1, 'value': 'Ankara'}, 
 
\t {'id': 2, 'value': 'İstanbul'}, 
 
\t {'id': 2, 'value': 'Istanbul'} 
 
] 
 

 
var uniqueRegions = removeDuplicates(regions, 'id') 
 

 
function removeDuplicates(arr, field) { 
 
    var u = []; 
 
    arr.reduce(function (a, b) { 
 
     if (a[field] !== b[field]) { 
 
      u.push(b); 
 
     } 
 
     return b; 
 
    }, []); 
 
    return u; 
 
} 
 

 
$('#myInput').autocomplete({ 
 
\t source: uniqueRegions 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script> 
 
<input type="text" placeholder="type here ..." id="myInput">

Answer 2

Благодаря vijayP в комментариях, мне удалось добиться того, что я пытался сделать с _renderItem.

Во-первых, вам нужно хранить в переменной, как это:

var autoComplete = $('#myInput').autocomplete({}); 

Затем вы можете использовать _renderItem на нем, так что вы можете настроить список сгенерированный с помощью плагина:

autoComplete.autocomplete("instance")._renderItem = function(ul, item) { 
    //Do your stuff 
} 

сейчас вы можете делать то, что вам нужно в открытом событии.

Вот полный фрагмент:

var regions = [{ 
 
    'id': 1, 
 
    'value': 'Ankara' 
 
}, { 
 
    'id': 2, 
 
    'value': 'İstanbul' 
 
}, { 
 
    'id': 2, 
 
    'value': 'Istanbul' 
 
}] 
 

 
var autoComplete = $('#myInput').autocomplete({ 
 
    source: regions, 
 
    open: function(event, ui) { 
 
    var $ul = $('#regions'); 
 
    $ul.find('li').each(function(id, region) { 
 
     var dataID = $(region).attr('data-id'); 
 
     var items = $ul.find('[data-id="' + dataID + '"]'); 
 
     console.log($(items).length); 
 
     if ($(items).length > 1) { 
 
     $(items).hide(); 
 
     $(items).first().show(); 
 
     } 
 
    }); 
 
    }, 
 
    messages: { 
 
    noResults: '', 
 
    results: function() {} 
 
    } 
 
}) 
 
autoComplete.autocomplete("instance")._renderItem = function(ul, item) { 
 
    var $ul = $(ul).prop('id', 'regions') 
 
    return $('<li data-id="' + item.id + '">') 
 
    .append(item.value) 
 
    .appendTo($ul); 
 
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script> 
 
<input type="text" placeholder="type here ..." id="myInput">