javascript - Jquery动态列表项选择第一个过滤的搜索项

Question

我的问题，当用户在输入字段中搜索文本时，如何选择第一个过滤的匹配列表项？如果用户单击输入，它会自动单击第一个选定的项目。我将非常感谢您的帮助。提前致谢。

//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("keyup", 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();
    }    
 });
});

Answer 1

我认为你应该在过滤器函数中使用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)。