Question

我正在创建一个搜索列表的输入，并检查输入的值是否存在于列表中，这与我输入一个值然后将其删除以使输入中的所有列表项均不存在值的情况相符。显示的块。如果输入中不存在任何值，我想隐藏所有列表项。这是我到目前为止所拥有的；

$('#prod_search').keyup( function(){
	search();
});

function search(){
    var input, filter, ul, li, sku, i, title;
    input = jQuery("#prod_search");
    filter = input.val().toUpperCase();
    ul = jQuery("#prod_list");
    li = ul.find("li");

    for(i = 0; i < li.length; i++){
        sku = li[i].getElementsByTagName("p")[0];
        title = li[i].getElementsByTagName("p")[1];
        
        if(sku.innerHTML.toUpperCase().indexOf(filter) > -1 || title.innerHTML.toUpperCase().indexOf(filter) > -1){
            li[i].style.display = "block";
        }else{
            li[i].style.display = "none";
        }
    }
}

#prod_list li{
    display: none;
    border: 1px solid black;
}

<script
  src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
  integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E="
  crossorigin="anonymous"></script>
 


<input type="text"  placeholder="Product Search" id="prod_search">

<ul id="prod_list">
    <li>
        <p>2342dhsa-1</p>
        <p>test 2 (Copy)</p>
    </li>

    <li>
        <p>01234dfwe</p>
        <p>test 5</p>
    </li>

    <li>
        <p>2343sdfg</p>
        <p>test 4</p>
    </li>

    <li>
        <p>2342sdff</p>
        <p>test 3</p>
    </li>

    <li>
        <p>2342dhsa</p>
        <p>test 2</p>
    </li>
</ul>

Answer 1

检查输入值，如果为空，则全部隐藏，return false则与您的代码无关，请使用

if(filter == '') {
 $('#prod_list li').hide();
 return false;
}

在您的搜索功能中

$('#prod_search').keyup( function(){
	search();
});

function search() {    
    var input, filter, ul, li, sku, i, title;
    input = jQuery("#prod_search");
    filter = input.val().toUpperCase();
    if(filter == '') {
     $('#prod_list li').hide();
     return false;
    }
    ul = jQuery("#prod_list");
    li = ul.find("li");

    for(i = 0; i < li.length; i++){
        sku = li[i].getElementsByTagName("p")[0];
        title = li[i].getElementsByTagName("p")[1];
        
        if(sku.innerHTML.toUpperCase().indexOf(filter) > -1 || title.innerHTML.toUpperCase().indexOf(filter) > -1){
            li[i].style.display = "block";
        }else{
            li[i].style.display = "none";
        }
    }
}

#prod_list li{
    display: none;
    border: 1px solid black;
}

<script
  src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
  integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E="
  crossorigin="anonymous"></script>
 


<input type="text"  placeholder="Product Search" id="prod_search">

<ul id="prod_list">
    <li>
        <p>2342dhsa-1</p>
        <p>test 2 (Copy)</p>
    </li>

    <li>
        <p>01234dfwe</p>
        <p>test 5</p>
    </li>

    <li>
        <p>2343sdfg</p>
        <p>test 4</p>
    </li>

    <li>
        <p>2342sdff</p>
        <p>test 3</p>
    </li>

    <li>
        <p>2342dhsa</p>
        <p>test 2</p>
    </li>
</ul>

Answer 2

在执行搜索之前检查输入值。

function search() {
  var input, filter, ul, li, sku, i, title;
  input = jQuery("#prod_search");
  filter = input.val().toUpperCase();
  ul = jQuery("#prod_list");
  li = ul.find("li");
  if (input != '') {
    for (i = 0; i < li.length; i++) {
      sku = li[i].getElementsByTagName("p")[0];
      title = li[i].getElementsByTagName("p")[1];

      if (sku.innerHTML.toUpperCase().indexOf(filter) > -1 || title.innerHTML.toUpperCase().indexOf(filter) > -1) {
        li[i].style.display = "block";
      } else {
        li[i].style.display = "none";
      }
    }
  } else {
    for (i = 0; i < li.length; i++) {
      li[i].style.display = "none";
    }
  }
}

Answer 3

有一种更简单的方法。

只需检查您的值的length，然后检查它是否大于0 hide()一切，并且仅show()个您用{{1}过滤的<li> }：

.filter()

$('#prod_search').keyup( function(){
  if(this.value.length){
    $('#prod_list li').hide().filter((_,e) => e.getElementsByTagName('p')[0].innerText.includes(this.value) || e.getElementsByTagName('p')[1].innerText.includes(this.value)).show();
  }else{
    $('#prod_list li').hide();
  }
});

#prod_list li{
    display: none;
    border: 1px solid black;
}

Answer 4

如果我理解正确，那么您想要的是在输入没有值或列表中任何项目都不存在的值时隐藏所有项目。

函数search（）{ var输入，过滤器... ...

for(i = 0; i < li.length; i++){

    // no filter, don't display the items.
    if (!filter)
    {
       li[i].style.display = "none";
       continue;
    }

    var sku = li[i].getElementsByTagName("p")[0];
    var title = li[i].getElementsByTagName("p")[1];
    ...
    if(sku.innerHTML.toUpperCase().indexOf(filter) > -1...) { ... }

}

jQuery if语句以检查值是否存在

4 个答案: