search dropdown close when outside click-CodePudding

When I type something in the search box the dropdown list shows but I want that when I click outside the rest of the search box, the search list will be closed.

function myFunction(e) {
  // find all `li` > a elements
  let col=document.querySelectorAll('ul#myUL li a');
      // iterate through all elements; re-hide & remove className from each.
      col.forEach(n=>{
      
        n.parentNode.style.display='none';
        n.classList.remove('bold');
        
        // if the typed value matches the beginning of a list item; display the text & assign Bold className
        if( this.value.length > 0 && this.value.trim()!='' && n.textContent.toLowerCase().includes( this.value.toLowerCase() ) ){
        
          n.parentNode.style.display='block';
          // make the whole word bold
          //n.classList.add('bold');
          
          // make the matched portion bold
          n.innerHTML = n.textContent.substr(0,n.textContent.toLowerCase().indexOf(this.value.toLowerCase())) `<span >${this.value}</span>`   n.textContent.substr(n.textContent.toLowerCase().indexOf(this.value.toLowerCase()) this.value.length)
        }
      });
}



document.querySelector('input[name="search"]').addEventListener('keyup',myFunction);

* {
  box-sizing: border-box;
}

#myInput {
  background-image: url('/css/searchicon.png');
  background-position: 10px 12px;
  background-repeat: no-repeat;
  width: 100%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  margin-bottom: 12px;
}

#myUL {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
#myUL li{
  display:none;
}

#myUL li a {
  border: 1px solid #ddd;
  margin-top: -1px; /* Prevent double borders */
  background-color: #f6f6f6;
  padding: 12px;
  text-decoration: none;
  font-size: 18px;
  color: black;
  display: block
}

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

.bold{font-weight:bold;color:red}

<input name='search' type="text" placeholder="Search for names.." title="Type in a name" />
<ul id="myUL">
  <li><a href="#">Adele</a></li>
  <li><a href="#">Agnes</a></li>
  <li><a href="#">Billy</a></li>
  <li><a href="#">Bob</a></li>
  <li><a href="#">Calvin</a></li>
  <li><a href="#">Christina</a></li>
  <li><a href="#">Cindy</a></li>
</ul>

CodePudding user response：

You can use a combination of the focusin and focusout events on your text box. The focusin event is triggered as soon as the user interacts with your text field e.g. clicking it. Now if the user clicks somewhere outside the text box, a focusout event is generated as the active element looses it's focus.

So: if the element gets focus display the dropdown, if it loses focus hide it.

Here's an example:

function myFunction(e) {
  // find all `li` > a elements
  let col = document.querySelectorAll('ul#myUL li a');
  // iterate through all elements; re-hide & remove className from each.
  col.forEach(n => {

    n.parentNode.style.display = 'none';
    n.classList.remove('bold');

    // if the typed value matches the beginning of a list item; display the text & assign Bold className
    if (this.value.length > 0 && this.value.trim() != '' && n.textContent.toLowerCase().includes(this.value.toLowerCase())) {

      n.parentNode.style.display = 'block';
      // make the whole word bold
      //n.classList.add('bold');

      // make the matched portion bold
      n.innerHTML = n.textContent.substr(0, n.textContent.toLowerCase().indexOf(this.value.toLowerCase()))   `<span >${this.value}</span>`   n.textContent.substr(n.textContent.toLowerCase().indexOf(this.value.toLowerCase())   this.value.length)
    }
  });
}



document.querySelector('input[name="search"]').addEventListener('keyup', myFunction);
document.querySelector('input[name="search"]').addEventListener("focusout", () => {
  document.getElementById("myUL").style.display = "none";
});
document.querySelector('input[name="search"]').addEventListener("focusin", () => {
  document.getElementById("myUL").style.display = "block";
});

* {
  box-sizing: border-box;
}

#myInput {
  background-image: url('/css/searchicon.png');
  background-position: 10px 12px;
  background-repeat: no-repeat;
  width: 100%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  margin-bottom: 12px;
}

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

#myUL li {
  display: none;
}

#myUL li a {
  border: 1px solid #ddd;
  margin-top: -1px;
  /* Prevent double borders */
  background-color: #f6f6f6;
  padding: 12px;
  text-decoration: none;
  font-size: 18px;
  color: black;
  display: block
}

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

.bold {
  font-weight: bold;
  color: red
}

<input name='search' type="text" placeholder="Search for names.." title="Type in a name" />
<ul id="myUL">
  <li><a href="#">Adele</a></li>
  <li><a href="#">Agnes</a></li>
  <li><a href="#">Billy</a></li>
  <li><a href="#">Bob</a></li>
  <li><a href="#">Calvin</a></li>
  <li><a href="#">Christina</a></li>
  <li><a href="#">Cindy</a></li>
</ul>