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