Элемент динамического списка 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.