文字列が入力されていない場合、リスト要素を非表示にする

Question

小さな検索エンジンソリューションが見つかりません。

<form> 
    <input /> 
</form> 
<ul> 
    <li>Lorem</li> 
    <li>Ipsum</li> 
    <li>Dolor</li> 
    <li>Sit</li> 
    <li>Amet</li> 
    <li>Enim</li> 
</ul> 

入力フィールドに入力中にリスト要素を非表示にしたいと思っています。 たとえば、「m」と入力すると、この文字を含まないリスト要素は消えます（li 3と4）。あなたが入力したら、「私は、」あなたは持っているだけでしょう：n番目の子（5）など

Answer 1

の全長で検索が大文字小文字を区別しないとinputに設けられる整合文字/単語です。この検索<li>であり、<li>にある文字の最初、最後、または最後に文字/単語があるかどうかを示す<li>を示します。

提案：あなたが他のinputあなたのページに追加し、だけでなく、あなたのul可能性があるとの混乱を防ぐために、あなたのinputの名前またはIDを与える必要があります。

$('input').bind('keyup click change',function(){ //Event on input 
 
    search = $(this).val().toLowerCase(); //Turns input val lowercase 
 
    var re = new RegExp(search, 'g'); 
 
    
 
    $('ul li').each(function(){ //Search in all <li> 
 
     $(this).hide(); //Hide all <li> 
 
     target = $(this).text().toLowerCase(); //Tuns <li> text lowercase 
 
     if(target.match(re)){ 
 
      $(this).show(); //Show <li> with matching letter/word 
 
     } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type='text' /> 
 

 
<ul> 
 
    <li>Lorem</li> 
 
    <li>Ipsum</li> 
 
    <li>Dolor</li> 
 
    <li>Sit</li> 
 
    <li>Amet</li> 
 
    <li>Enim</li> 
 
</ul>

Answer 2

私はちょうどそれを見つけ、まあこの

if(jQuery('input').val() == ''){ 
    jQuery('ul').hide(); 
} 

Answer 3

を試してみて、それが正確に何をしたいのです：duckyflipの応答で

https://stackoverflow.com/a/1767031/7739055

、 Toni Michel CaubetがJSFidを共有DLE：

Exemple of code

HTMLコード：

<input type="text" id="filter" placeholder="Filtra por.." /> 
<ul> 
    <li><a>musica</a></li> 
    <li><a>musicas</a></li> 
    <li><a>tele</a></li> 
    <li><a>videos graciosos</a></li> 
    <li><a>uib</a></li> 
    <li><a>bio</a></li> 
    <li><a>tecnología</a></li> 
    <li><a>Tonterías</a></li> 
    <li><a>Más Tonterías</a></li> 
    <li><a>Tonterias sin acento</a></li> 
    <li><a>Teta</a></li> 
    <li><a>Pis</a></li> 
</ul> 

jQueryのコード：テキストボックスの

jQuery.expr[':'].containsLower = function(a, i, m) { 
    return jQuery(a).text().toUpperCase() 
     .indexOf(m[3].toUpperCase()) >= 0; 
}; 


$('#filter').keyup(function(){ 
    $('ul li').hide().filter(':containsLower("'+this.value+'")').show(); 
}); 

Answer 4

使用keyupイベントとul liルーピング検索文字列をチェックします。

$("#txtSearch").keyup(function() { 
 
    var search = $(this).val(); 
 
    $('ul > li').each(function() { 
 
    var liVal = $(this).text(); 
 
    liVal.indexOf(search) != -1? $(this).show(): $(this).hide();; 
 
     
 
     
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type='text' id='txtSearch' /> 
 

 
<ul> 
 
    <li>Lorem</li> 
 
    <li>Ipsum</li> 
 
    <li>Dolor</li> 
 
    <li>Sit</li> 
 
    <li>Amet</li> 
 
    <li>Enim</li> 
 
</ul>

Answer 5

これを試してみてください、あなたのスクリプトでのjQueryを含めることを忘れないでください。この検索で​​は大文字と小文字が区別されます。

// bind change  
       $('input').bind('keyup click change',function(){ 
        var toSearch = $("input#target").val(); 
            console.log('toSearch '+toSearch); 
            alert(toSearch); 
        // hide all li elements 
        $("li").hide(); 
        // loop through all li and search your substring 
        $('li').each(function(){ 
         // through your text 
         if($(this).text().includes(toSearch)) { 
          $(this).show(); 
         } 
       }) 
       });