Я использую javascript с вызовом / ответом ajax, чтобы запросить конечную точку и вернуть часть результатов списку данных в моей форме ввода.
Это работает (значит, мой возвращенный результат - заполнение списка данных), но моя проблема - фильтрация элементов.
Скажите, что я ищу 'Box' на входе. Нажатие «B» возвращает 13 пунктов, и они отображаются правильно в списке данных. Когда я добавляю напечатанный «o» («Bo» теперь на входе), тогда я возвращаю только 7 элементов в новом вызове / возврате в моей консоли. Тем не менее, мой datalist показывает все 20 элементов, где он должен показывать только самые новые 7 элементов, особенно если некоторые существуют в предыдущих 13.
Что я делаю не так здесь, что приводит к тому, что это не фильтрует, или показывает только последние результаты для каждого нажатия клавиши?
<input id ="productInput" class="uk-search-field" type="search" placeholder="search products..." list="returnedProducts">
<datalist id="returnedProducts">
</datalist>
<script type="text/javascript">
//input event handler
$('#productInput').on('input', function(){
if($(this).val() === ''){
return;
}else{
//input value
const searchResult = $(this).val();
$.ajax({ url: '/autocomplete',
data: {
search_result:searchResult
},
"_token": "{{ csrf_token() }}",
type: "POST",
success: function(response){
let searchResult = response.hits.hits;
for(let i = 0; i < searchResult.length; i++) {
$("#returnedProducts").append("<option value=" + searchResult[i]._source.category + ">" + searchResult[i]._source.category + "</option>");
console.log(searchResult[i]._source);
}
}
});
}
});
</script>