Searchable drop down

user_10054903 0
Viewed 95

I have a list of items in a drop down which is filterable using a search within the dropdown.

<div class="dropdown">
  <button onclick="myFunction()" class="dropbtn">Please select</button>
    <div id="myDropdown" class="dropdown-content">
    <input type="text" placeholder="Search.." id="myInput" onkeyup="filterFunction()">
      <a href="#">Abyssinian</a>
      <a href="#">American Bobtail</a>
      <a href="#">Amercian Curl</a>
    </div>
</div>

And the js...

function myFunction() {
    document.getElementById("myDropdown").classList.toggle("show");
}

function filterFunction() {
  var input, filter, ul, li, a, i;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  div = document.getElementById("myDropdown");
  a = div.getElementsByTagName("a");
  for (i = 0; i < a.length; i++) {
    txtValue = a[i].textContent || a[i].innerText;
    if (txtValue.toUpperCase().indexOf(filter) > -1) {
    a[i].style.display = "";
    } else {
      a[i].style.display = "none";
    }
  }
}

https://codepen.io/RSA_James/pen/LYZqYym

What I'm after is a way of showing a message if a user starts searching for something and there's no matches.

Any help appreciated! Thanks

html jquery javascript
3 Answers

ES6 shrinks the code a bit:

function filterFunction(sText) {
  [...document.querySelectorAll('#myDropdown a')].forEach(elA => elA.classList.toggle('hide', !new RegExp(sText, 'gi').test(elA.textContent)));
  document.querySelector('#myDropdown span.err').classList.toggle('hide', document.querySelectorAll('#myDropdown a:not(.hide)').length);
}
.hide { display: none; } .err { color: red; }
<div class="dropdown">
  <button onclick="myFunction()" class="dropbtn">Please select</button>
  <div id="myDropdown" class="dropdown-content">
    <input type="text" placeholder="Search.." id="myInput" oninput="filterFunction(this.value)">
    <a href="#">Abyssinian</a>
    <a href="#">American Bobtail</a>
    <a href="#">Amercian Curl</a>
    <span class="err hide">Nothing found</span>
  </div>
</div>

user_101794150

Have a look here, added some new code and created a new element when there is no found result.

function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

function filterFunction() {
  var input, filter, ul, li, a, i;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  div = document.getElementById("myDropdown");
  a = div.getElementsByTagName("a");
  var empty = document.createElement("a");
  empty.classList.add("empty");
  empty.innerHTML="No Reault Found...";
  var emptyVisiable= true;
  for (i = 0; i < a.length; i++) {
    txtValue = a[i].textContent || a[i].innerText;
    if (txtValue.toUpperCase().indexOf(filter) > -1) {
      a[i].style.display = "";
      emptyVisiable = false;
    } else {
      a[i].style.display = "none";
    }
  }
  
  if (emptyVisiable)
    div.appendChild(empty);
  else {
    empty= div.querySelector(".empty")
    if (empty!== null)
       empty.remove();
    
    }
}
.dropbtn {
  background-color: #e3e3e3;
  background-image: url('https://image.flaticon.com/icons/png/512/25/25243.png');
  background-position: 270px center;
  background-repeat: no-repeat;
  background-size: 5%;
  color: #333 ;
  border: 1px solid red;
  border-radius: 5px;
  min-width: 300px;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
  text-align: left;
}

.dropbtn:hover, .dropbtn:focus {
  background-color: #d3d3d3;
}

#myInput {
  box-sizing: border-box;
  background-image: url('https://www.w3schools.com/howto/searchicon.png');
  background-position: 14px 12px;
  background-repeat: no-repeat;
  font-size: 16px;
  padding: 14px 20px 12px 45px;
  border: none;
  border-bottom: 1px solid #ddd;
  width: 100%;
}

#myInput:focus {outline: 3px solid #ddd;}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f6f6f6;
  min-width: 230px;
  width: 100%;
  max-height: 260px;
  overflow: auto;
  border: 1px solid #ddd;
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown a:hover {background-color: #ddd;}

.show {display: block;}
<h2>Search/Filter Dropdown</h2>
<p>Click on the button to open the dropdown menu, and use the input field to search for a specific dropdown link.</p>

<div class="dropdown">
  <button onclick="myFunction()" class="dropbtn">Please select</button>
  <div id="myDropdown" class="dropdown-content">
    <input type="text" placeholder="Search.." id="myInput" onkeyup="filterFunction()">
    <a href="#">Abyssinian</a>
    <a href="#">American Bobtail</a>
    <a href="#">Amercian Curl</a>
    <a href="#">American Longhair</a>
    <a href="#">American Shorthair</a>
    <a href="#">American Wirehair</a>
    <a href="#">Angora</a>
    <a href="#">Asian</a>
    <a href="#">Asian Blue</a>
    <a href="#">Balinese</a>
    <a href="#">Bengal</a>
    <a href="#">Bengal Tiger</a>
    <a href="#">Bicolour</a>
    <a href="#">Bicolour Longhair</a>
    <a href="#">British Bicolour Shorthair</a>
    <a href="#">Birman</a>
    <a href="#">Black</a>
    <a href="#">Black and White</a>
    <a href="#">Black and White Longhair</a>
    <a href="#">Black and White Shorthair</a>
    <a href="#">Black Longhair</a>
    <a href="#">Black Shorthair British Black</a>
  </div>
</div>

user_48285240

you can accomplish this by adding a p tag for the error in the html and a counter that increments each time no res is found in the loop of your filter function followed by an if at the end that checks to see if the counter === the lengths of links

function myFunction() {
    document.getElementById("myDropdown").classList.toggle("show");
}

function filterFunction() {
  var input, filter, ul, li, a, i;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  div = document.getElementById("myDropdown");
  a = div.getElementsByTagName("a");
  
  let count = 0;
  
  for (i = 0; i < a.length; i++) {
    txtValue = a[i].textContent || a[i].innerText;
    if (txtValue.toUpperCase().indexOf(filter) > -1) {
    a[i].style.display = "";
    } else {
      count++;
      a[i].style.display = "none";
    }
  }
  
  
  if(count == a.length )
    displayNoResults(filter);
 
}

function displayNoResults(searchTxt) {
  let noResFound = document.getElementById("noResFound");
  noResFound.style.display = "block"
  noResFound.innerHTML = `No results for "${searchTxt}" were found`
  
}
<div class="dropdown">
  <button onclick="myFunction()" class="dropbtn">Please select</button>
    <div id="myDropdown" class="dropdown-content">
      <input type="text" placeholder="Search.." id="myInput" onkeyup="filterFunction()">
      <p id="noResFound"></p>
      <a href="#">Abyssinian</a>
      <a href="#">American Bobtail</a>
      <a href="#">Amercian Curl</a>
    </div>
</div>

user_76228730
Related