Элемент динамического списка JQuery выбирает первую фильтрованную позицию поиска

Мой вопрос, когда пользователь вводит текст в поле ввода, как выбрать первый фильтрованный элемент списка соответствия? и если пользователь щелкнет, он автоматически щелкнет первый выбранный элемент. Я буду очень благодарен за вашу помощь. Заранее спасибо.

//pug file which displays dynamic list items. Each list item has href tag url link. .row .col-md-8.offset-md-2.pad .form(class="form-row justify-content-center deparrSearchForm") .form-group.col-md-8 input(type="text" class="form-control form-control-lg" id="fromStation" name="fromStation" placeholder="Type train station name & press enter") for prop in stationName ul(class="list-group text-center" id="mylist") a(href="/train/search-deparrtrain-submit/"+prop.stationShortCode+'/'+prop.stationName) li(class="list-group-item") #{prop.stationName}
// Jquery which filter my input search text and display list items
$("#fromStation").on("*****", function() {
var searchText = $(this).val().toLowerCase(); $("#mylist li").filter(function(){ var text= $(this).text().toLowerCase(); if(text.indexOf(searchText) >= 0){ $(this).show(); } else{ $(this).hide(); } });
});
2 ответа

Мое решение:

Для функции ввода поля ввода я передаю событие, функция фильтра динамического списка передаю индекс.

В функции фильтра я присваиваю значение индекса элемента фильтрованного списка временному массиву. Я получаю все отфильтрованные позиции позиции списка. Теперь я могу делать все, что хочу. Для моего случая, если пользователь нажмет клавишу ввода, я покажу первые элементы фильтрованного списка.

Код Jquery:

$("#fromStation").on("keypress",function(e) {
var searchText = $(this).val().toLowerCase();
var temparr=[];
$("#mylist li").filter(function(index){ var text= $(this).text().toLowerCase(); if(text.indexOf(searchText) >= 0){ $(this).show().first(); temparr.push(index); } else{ $(this).hide(); }
});
if(e.which == 13){ $("#mylist li").eq(temparr[0]).click(); console.log(temparr); return false; }

});


Я думаю, вы должны использовать index в функции фильтра, например:

$("#mylist li").filter(function(index){ var text= $(this).text().toLowerCase(); if(text.indexOf(searchText) >= 0){ $(this).show(); } else{ $(this).hide(); } });

Затем найдите этот элемент через eq что-то вроде $( this).eq( index ) сделайте все, что вы хотите.

или используйте $("#mylist").eq(index) в функции фильтра.

licensed under cc by-sa 3.0 with attribution.