フィルタリングされたHTMLリスト：

Question

この最初に目に見えない作りのli要素はHTMLです：

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="orasul tau.."> 

<ul id="myUL"> 
    <li>Bucuresti</li> 
    <li>Cluj</li> 
    <li>Timisoara</li> 
</ul> 

そして、これは私のザ・スクリプトです：

var value = $('#myInput').val(); 
if(value.length == 0) { 
    $("#myUL li").style.display = "none"; 
} 

$('#myInput').bind('keyup', function() { 
    var searchString = $(this).val();  
    $("ul li").each(function(index, value) { 
     currentName = $(value).text() 
     if(currentName.toUpperCase().indexOf(searchString.toUpperCase()) > -1) { 
      $(value).show(); 
     } else { 
      $(value).hide(); 
     } 
    }); 
}); 

私はテキストに基づいて、ULの要素をフィルタリングします入力に

初期のifの文はすべて正常に動作していますが、すべてのli要素の初期値はdiplay:noneであることが必要です。それを追加すると、フィルタリング全体が無効になります。ifどのように私はそれを行うことができるすべての可能な解決策？

ご協力いただければ幸いです。

Answer 1

問題は$("#myUL li").style.display = "none"は意味がありません。 $("#myUL li")は、HTMLElementではなくjQueryインスタンスオブジェクトです。したがって、プロパティーはstyleではありません。

$("#myUL li").hide()を使用すると、すべての要素が非表示になります。

しかし、より良いアプローチはmyInputが価値がある場合は、最初はLIを隠し、ページロードの1件の検索をトリガするためにCSSを使用することです：

var $input = $('#myInput').on('input', function() { 
 
    var searchString = $(this).val(); 
 
    $("ul li").each(function(index, value) { 
 
    var currentName = $(value).text() 
 
    var shouldShow = searchString.length && currentName.toUpperCase().indexOf(searchString.toUpperCase()) > -1; 
 
    
 
    if (shouldShow) { 
 
     $(value).show(); 
 
    } else { 
 
     $(value).hide(); 
 
    } 
 
    }); 
 
}); 
 

 
var value = $input.val(); 
 

 
if (value.length !== 0) { 
 
$input.trigger('keyup'); 
 
}

#myUL li { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" id="myInput" placeholder="orasul tau.."> 
 

 
<ul id="myUL"> 
 
    <li>Bucuresti</li> 
 
    <li>Cluj</li> 
 
    <li>Timisoara</li> 
 
</ul>

Answer 2

https://jsfiddle.net/Lmhw3u5n/1/

JSを

var value = $('#myInput').val(); 
//if(value.length == 0) { 
    //$("#myUL li").style.display = "none"; 
//} 

$('#myInput').bind('keyup', function() { 
    var searchString = $(this).val();   
    if(searchString == '') { 
     document.getElementById('myUL').style.display = 'none'; 
    } 
    else { 
     document.getElementById('myUL').style.display = 'block'; 
    } 
    $("ul li").each(function(index, value) { 
     currentName = $(value).text() 
     if(currentName.toUpperCase().indexOf(searchString.toUpperCase()) > -1) { 
      $(value).show(); 
     } else { 
      $(value).hide(); 
     } 
    }); 
}); 

Answer 3

は次のように$('#myUL li').hide()を試してみてください：

var value = $('#myInput').val(); 
 
if(value.length == 0) { 
 
    $('#myUL li').hide(); 
 
} 
 

 
$('#myInput').bind('keyup', function() { 
 
    var searchString = $(this).val();  
 
    $("ul li").each(function(index, value) { 
 
     currentName = $(value).text() 
 
     if(searchString == ''){$('#myUL li').hide(); } 
 
     else if(currentName.toUpperCase().indexOf(searchString.toUpperCase()) > -1) { 
 
     $(value).show(); 
 
     } else { 
 
     $(value).hide(); 
 
     } 
 
    }); 
 
}); 
 

 
function myFunction(){}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="orasul tau.."> 
 

 
<ul id="myUL"> 
 
    <li>Bucuresti</li> 
 
    <li>Cluj</li> 
 
    <li>Timisoara</li> 
 
</ul>