Jquery搜索文本框:搜索时如何忽略列表中重复的元素

jquery search text box: how to ignore few list repeated elements while searching

本文关键字：搜索 元素 忽略列表 文本 Jquery      更新时间：2023-09-26

我有一个国家列表，用户可以从中选择一个国家。我们很少有国家需要在展示名单上名列前茅。在这些国家被显示在顶部之后，我们有正常的国家字母顺序。

但是排名靠前的国家又按字母顺序出现了，因为当用户搜索它们时，它们出现了两次。例如，印度排名第一，也是按字母顺序排列的。因此，当用户输入"Ind"时，会显示两个结果，这让用户感到困惑。

我们正在使用普通的jquery字符串匹配，并根据用户输入在li上执行show/hide，如下所示搜索列表中的用户输入:

  $('#s').keyup(function(){
   var valThis = $(this).val().toLowerCase();
    $('.countryList>li').each(function(){
     var text = $(this).text().toLowerCase();
        (text.indexOf(valThis) == 0) ? $(this).show() : $(this).hide();            
   });
  });

如何保留这些重复的条目，并且当有人搜索它们时只显示一个实例。

这里是fiddle-的链接演示小提琴

您可以尝试跟踪您已经在数组中找到的国家，如果已经找到，则隐藏它们。

$('#s').keyup(function(){
   var foundCountries = [];
   var valThis = $(this).val().toLowerCase();
    $('.countryList>li').each(function(){
        var text = $(this).text().toLowerCase();
        if(!text.inArray(foundCountries) && text.indexOf(valThis) == 0) {
              $(this).show();
              foundCountries.push(text);
        } else {
              $(this).hide();
        }      
   });
});
相关文章：