jquery搜索文本框：如何在搜索时忽略少数列表重复的元素

Question

我有用户可以从中选择一个国家的国家列表。我们有几个国家需要位于显示列表的顶部。在这些国家排在最前面之后，我们就有正常的国家字母排序。

但是，顶部的国家再次按字母顺序排列，因此当用户搜索它们时，它们会出现两次。例如，印度排在最前面，也排在字母顺序上。因此，当用户键入“Ind”时，会显示两个令用户感到困惑的结果。

我们使用普通的jQuery的字符串匹配和基于用户输入对李做显示/隐藏如下搜索用户输入列表：

$('#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- demo fiddle

Answer 1

你可以试着跟踪你在一个阵列已经找到哪个国家的，如果他们已经发现了，然后隐藏它们。

$('#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(); 
     }  
    }); 
});