jQuery if statement to check if a value exists

Question

I am creating an input that searchs through a list and checks if the value entered exists within the list, this works fine apart from when I enter a value then delete it so that no value exists within the input all the list items are displayed block. If no value exists within the input I want to hide all the list items. Here's what I have so far;

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

Check the input value, if empty then hide all and return false else nothing to do with your code, Use

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

in your search function

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