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具有值时在页面加载时触发一次搜索：

＆＃13;

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

＆＃13;

#myUL li {
  display: none;
}

＆＃13;

<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>

＆＃13;

Answer 2

尝试$('#myUL li').hide()，如下所示：

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 3

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

过滤的HTML列表：使li元素最初不可见

3 个答案: