How can I hide search results until I've entered text?-CodePudding

Basically, this code makes it so that all results show and get trimmed down when you search for something specific. I want to hide all results before I've started writing and when I've entered at least one letter results show up again. I've been stuck at that exact problem for hours and have concluded with nothing.

I'd really appreciate the help.

function Function() {
  var input, filter, ul, li, a, i, txtValue;
  input = document.getElementById('Input');
  filter = input.value.toUpperCase();
  ul = document.getElementById("UL");
  li = ul.getElementsByTagName('li');

  for (i = 0; i < li.length; i  ) {
    a = li[i].getElementsByTagName("a")[0];
    txtValue = a.textContent || a.innerText;
    if (txtValue.toUpperCase().indexOf(filter) > -1) {
      li[i].style.display = "";
    } else {
      li[i].style.display = "none";
    }
  }
}

#Input {
  background-image: url('/css/searchicon.png');
  background-position: 10px 12px;
  background-repeat: no-repeat;
  width: 30%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  justify-content: center;
  height: 20px;
}

@media screen and (max-width: 600px) {
  #Input {
    width: 80%;
    margin-top: 4px;
  }
}

;
#UL {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

#UL li a {
  border: 1px solid #ddd;
  margin-top: -1px;
  background-color: #f6f6f6;
  padding: 12px;
  width: 30%;
  text-decoration: none;
  font-size: 18px;
  color: black;
  display: block;
}

#UL li a:hover:not(.header) {
  background-color: #eee;
}

<input type="text" id="Input" onkeyup="Function()" placeholder="Search...">

<ul id="UL" style="list-style: none;">
  <li ><a href="Products/a6000.html">SONY a6000</a></li>
  <li ><a href="Products/a6400.html">SONY a6400</a></li>

  <li ><a href="Products/a7 IV.html">SONY a7 IV</a></li>
  <li ><a href="Products/EOS RP.html">Canon EOS RP</a></li>

  <li ><a href="Products/D3500.html">Nikon D3500</a></li>
  <li ><a href="Products/X1D II 50C.html">Hasselblad X1D II 50C</a></li>
</ul>

CodePudding user response：

If I understand correctly, Initially all the results will be shown? Then when you start typing they will be hidden(not entered any letter) and after entering atleast one element they start showing again? In that case you can use onfocus event along with onkeyup event.

function Function() {
 
  let input, filter, ul, li, a, i, txtValue;
  input = document.getElementById('Input');
  filter = input.value.toUpperCase();
  ul = document.getElementById("UL");
  li = ul.getElementsByTagName('li');

  for (i = 0; i < li.length; i  ) {
    a = li[i].getElementsByTagName("a")[0];
    txtValue = a.textContent || a.innerText;
    if (txtValue.toUpperCase().indexOf(filter) > -1 && filter!=='') {
      li[i].style.display = "";
    } else {
      li[i].style.display = "none";
    }
  }
}

#Input {
  background-image: url('/css/searchicon.png');
  background-position: 10px 12px;
  background-repeat: no-repeat;
  width: 30%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  justify-content: center;
  height: 20px;
}

@media screen and (max-width: 600px) {
  #Input {
    width: 80%;
    margin-top: 4px;
  }
}

;
#UL {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

#UL li a {
  border: 1px solid #ddd;
  margin-top: -1px;
  background-color: #f6f6f6;
  padding: 12px;
  width: 30%;
  text-decoration: none;
  font-size: 18px;
  color: black;
  display: block;
}

#UL li a:hover:not(.header) {
  background-color: #eee;
}

<input type="text" id="Input" onkeyup="Function()" onfocus="Function()" placeholder="Search...">

<ul id="UL" style="list-style: none;">
  <li ><a href="Products/a6000.html">SONY a6000</a></li>
  <li ><a href="Products/a6400.html">SONY a6400</a></li>

  <li ><a href="Products/a7 IV.html">SONY a7 IV</a></li>
  <li ><a href="Products/EOS RP.html">Canon EOS RP</a></li>

  <li ><a href="Products/D3500.html">Nikon D3500</a></li>
  <li ><a href="Products/X1D II 50C.html">Hasselblad X1D II 50C</a></li>
</ul>

If you want to show all the results again when unfocusing the input field (and not any letter in the input field) then you can use onblur event to achieve that as well by modifying input field like below and add the function.

function Function2()
{
  let input, filter, ul, li, a, i, txtValue;
  input = document.getElementById('Input');
  filter = input.value.toUpperCase();
  ul = document.getElementById("UL");
  li = ul.getElementsByTagName('li');

  for (i = 0; i < li.length; i  ) {
    a = li[i].getElementsByTagName("a")[0];
    txtValue = a.textContent || a.innerText;
    if (txtValue.toUpperCase().indexOf(filter) > -1) {
      li[i].style.display = "";
    } else {
      li[i].style.display = "none";
    }
  }
}

<input type="text" id="Input" onkeyup="Function()" onfocus="Function()" onblur="Function2()" placeholder="Search...">

CodePudding user response：

Given your html structure you can do this in one line of css:

#Input:focus:placeholder-shown   ul {
  display:none;
}

It works because you have placeholder text on your input element, and the <ul> is adjacent to it. Read more here: https://developer.mozilla.org/en-US/docs/Web/CSS/:placeholder-shown https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_combinator