外部點擊時關閉搜索下拉選單

當我在搜索框中輸入內容時，下拉串列會顯示，但我希望當我在搜索框的其余部分之外單擊時，搜索串列將被關閉。

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>

uj5u.com熱心網友回復：

您可以在文本框中使用focusin和focusout事件的組合。只要用戶與您的文本欄位互動，例如單擊它，就會觸發 focusin 事件。現在，如果用戶單擊文本框外的某處，則會在活動元素失去焦點時生成一個焦點輸出事件。

所以：如果元素獲得焦點顯示下拉選單，如果它失去焦點隱藏它。

這是一個例子：

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>

標籤：javascript html css

上一篇：Bootstrap：動態更改單選按鈕顏色

下一篇：jQuery在應用CSS時淡入/淡出