jQuery if语句检查一个值是否存在

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() 您用 [= 过滤的 <li> 17=] :

$('#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;
}

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

如果我没理解错的话，你想要的是当输入没有值或者输入的值不存在于列表中的任何项目时隐藏所有项目。

函数搜索(){ 可变输入，过滤器... ...

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语句检查一个值是否存在

jQuery if statement to check if a value exists

html

javascript

jquery

searchbar