javascript - 过滤后的 HTML 列表 : making li elements initially invisible

Question

这是 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") 是 jQuery 实例对象，而不是 HTMLElement。所以它没有属性style。

使用 $("#myUL li").hide() 隐藏所有元素。

但是，更好的方法是首先使用 CSS 隐藏 LI，如果 myInput 有值，则在页面加载时触发一次搜索:

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>