2016-11-16 9 views
0

ユーザーが1つの国を選択できる国のリストがあります。私たちは、ディスプレイリストの一番上にいる必要がある国はほとんどありません。これらの国が上に表示された後、私たちは国のアルファベット順のアルファベット順を持っています。jquery検索のテキストボックス:検索中に少数の繰り返し要素を無視する方法

しかし、一番上の国はアルファベット順に表示されるため、ユーザーが検索すると2回表示されます。たとえば、インドはアルファベット順に表示されます。したがって、ユーザーが "Ind"と入力すると、ユーザーに混乱を招く2つの結果が表示されます。

我々は、通常の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

答えて

0

ためのリンクです。

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

私は@ Keith.Abramoのアイデアでいくつかの変更を行いました。うんざりしているように見えますが、まだ仕事が終わってしまいます。 [link](https://jsfiddle.net/35d2woec/1/) また、== 0を!== -1と置き換えました。これは、単一文字検索が正しく機能しないためです。 –