Search results element not hiding, when input is empty-CodePudding

I'm trying to create a search/filter function where the list of options is hidden anytime nothing is typed into the search box. I've managed to get it hidden before, but for some reason after I've input a value and erase it, everything in the list shows up again.

The search should also be able to search for words out of order and that cannot be sacrificed to achieve this goal.

Code copied below. Thanks.

CSS

#input {
  width: 85%; /* Full-width */
  padding: 12px 20px 12px 15px; /* Add some padding */
  border: 1px solid #ddd; /* Add a grey border */
  margin-bottom: 12px; /* Add some space below the input */
  border-radius: 15px;
  font-size: 16px;
  font-family: Franklin Gothic Book;
}

#trpUL {
  /* Remove default list styling */
  list-style-type: none;
  padding: 0;
  margin: 0;
  position: absolute;
  z-index: 1;
  width: 35%;
}

#trpUL li a {
  border: 1px solid #ddd; /* Add a border to all links */
  margin-top: -1px; /* Prevent double borders */
  background-color: #f6f6f6; /* Grey background color */
  padding: 12px; /* Add some padding */
  text-decoration: none; /* Remove default text underline */
  font-size: 13px; /* Increase the font-size */
  font-weight: bold;
  color: #1d4f91; /* Add a black text color */
  display: block; /* Make it into a block element to fill the whole list */
  font-family: Franklin Gothic Book;
}

#trpUL li {
  display:none;
}

#trpUL li a:hover:not(.header) {
  background-color: #eee; /* Add a hover effect to all links, except for headers */
}

javascript

function myFunction() {
  var filter = $('input').val().toUpperCase().split(' '); 
  var li = $('li');
  var a = $('a');
  var ul;
  var txtValue;
  ul = document.getElementById("trpUL");
  var match
  
  
  for (var i = 0; i < li.length; i  ) {
    a = li[i].getElementsByTagName("a")[0];
    txtValue = (a.textContent || a.innerText).toUpperCase();
    
    match = true;
   

    for (var f = 0; f < filter.length && match; f  ) {
        match = txtValue.includes(filter[f]);
    }

    li[i].style.display = match ? 'block' : 'none';

    
  }
}

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="input" onkeyup="myFunction()" placeholder="Search resources..." value="">

<ul id="trpUL">
  <li><a href="/" target="_blank">Alabama HomeCare - New Hire Curriculum</a></li>
  <li><a href="/" target="_blank">Arizona HomeCare - New Hire Curriculum</a></li>

  <li><a href="/" target="_blank">California HomeCare Leadership - New Hire Curriculum</a></li>
  <li><a href="/" target="_blank">Georgia HomeCare - New Hire Curriculum</a></li>

  <li><a href="/" target="_blank">Georgia HomeCare IDD - New Hire Curriculum</a></li>
  <li><a href="/" target="_blank">HomeCare Leadership - New Hire Curriculum</a></li>
  <li><a href="/" target="_blank">Idaho HomeCare - New Hire Curriculum</a></li>
  <li><a href="/" target="_blank">Illinois Licensed HomeCare - New Hire Curriculum</a></li>
  <li><a href="/" target="_blank">Illinois Non-Licensed HomeCare</a></li>
  <li><a href="/" target="_blank">Montana HomeCare - New Hire Curriculum</a></li>
</ul>

CodePudding user response：

It seems that even when filter is empty, it still has a value of "". Adding a check for this, let's us hide the dropdown when the search bar is empty.

if (!filter || !filter[0]) match = false;

Here's a working demo:

function myFunction() {
  var filter = $('input').val().toUpperCase().split(' '); 
  
  var li = $('li');
  var a = $('a');
  var ul;
  var txtValue;
  ul = document.getElementById("trpUL");
  var match
  for (var i = 0; i < li.length; i  ) {
    a = li[i].getElementsByTagName("a")[0];
    txtValue = (a.textContent || a.innerText).toUpperCase();
    match = true;
    for (var f = 0; f < filter.length && match; f  ) {
        match = txtValue.includes(filter[f]);
    }
    if (!filter || !filter[0]) {
     match = false;
    }
    li[i].style.display = match ? 'block' : 'none';
  }
}

#input {
  width: 85%; /* Full-width */
  padding: 12px 20px 12px 15px; /* Add some padding */
  border: 1px solid #ddd; /* Add a grey border */
  margin-bottom: 12px; /* Add some space below the input */
  border-radius: 15px;
  font-size: 16px;
  font-family: Franklin Gothic Book;
}

#trpUL {
  /* Remove default list styling */
  list-style-type: none;
  padding: 0;
  margin: 0;
  position: absolute;
  z-index: 1;
  width: 35%;
}

#trpUL li a {
  border: 1px solid #ddd; /* Add a border to all links */
  margin-top: -1px; /* Prevent double borders */
  background-color: #f6f6f6; /* Grey background color */
  padding: 12px; /* Add some padding */
  text-decoration: none; /* Remove default text underline */
  font-size: 13px; /* Increase the font-size */
  font-weight: bold;
  color: #1d4f91; /* Add a black text color */
  display: block; /* Make it into a block element to fill the whole list */
  font-family: Franklin Gothic Book;
}

#trpUL li {
  display:none;
}

#trpUL li a:hover:not(.header) {
  background-color: #eee; /* Add a hover effect to all links, except for headers */
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="input" onkeyup="myFunction()" placeholder="Search resources..." value="">

<ul id="trpUL">
  <li><a href="/" target="_blank">Alabama HomeCare - New Hire Curriculum</a></li>
  <li><a href="/" target="_blank">Arizona HomeCare - New Hire Curriculum</a></li>

  <li><a href="/" target="_blank">California HomeCare Leadership - New Hire Curriculum</a></li>
  <li><a href="/" target="_blank">Georgia HomeCare - New Hire Curriculum</a></li>

  <li><a href="/" target="_blank">Georgia HomeCare IDD - New Hire Curriculum</a></li>
  <li><a href="/" target="_blank">HomeCare Leadership - New Hire Curriculum</a></li>
  <li><a href="/" target="_blank">Idaho HomeCare - New Hire Curriculum</a></li>
  <li><a href="/" target="_blank">Illinois Licensed HomeCare - New Hire Curriculum</a></li>
  <li><a href="/" target="_blank">Illinois Non-Licensed HomeCare</a></li>
  <li><a href="/" target="_blank">Montana HomeCare - New Hire Curriculum</a></li>
</ul>