SoFunction
Updated on 2025-04-08

js implements a drop-down menu with menu column search

When there are many drop-down menu columns, it will be troublesome for users to find column reading. In order to improve user experience, it will be very convenient to add columns to search. This article mainly introduces the js implementation of a drop-down menu with menu column search. It feels quite practical. Friends who need it can refer to it.

js implements a drop-down menu with search — basic HTML code

<div class="dropdown">
  <button onclick="myFunction()" class="dropbtn">Pull-down menu</button>
  <div  class="dropdown-content">
    <input type="text" placeholder="Search.."  onkeyup="filterFunction()">
    <a href="#about" rel="external nofollow" >Google</a>
    <a href="#base" rel="external nofollow" >Runoob</a>
    <a href="#blog" rel="external nofollow" >Taobao</a>
    <a href="#contact" rel="external nofollow" >Wiki</a>
    <a href="#custom" rel="external nofollow" >Zhihu</a>
    <a href="#support" rel="external nofollow" >Tmall</a>
    <a href="#tools" rel="external nofollow" >Weibo</a>
  </div>
</div>

js implements a drop-down menu with search — menu style:

/* Pull-down menu button */
.dropbtn {
  background-color: #04AA6D;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}
 
/* Move the mouse to drop-down menu button to style*/
.dropbtn:hover, .dropbtn:focus {
  background-color: #3e8e41;
}
 
/* Search box */
#myInput {
  box-sizing: border-box;
  background-image: url('');
  background-position: 14px 12px;
  background-repeat: no-repeat;
  font-size: 16px;
  padding: 14px 20px 12px 45px;
  border: none;
  border-bottom: 1px solid #ddd;
}
 
/* The style of search box to get focus */
#myInput:focus {outline: 3px solid #ddd;}
 
/* Container <div> - Position drop-down menu */
.dropdown {
  position: relative;
  display: inline-block;
}
 
/* drop-down menu content (hidden by default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f6f6f6;
  min-width: 230px;
  border: 1px solid #ddd;
  z-index: 1;
}
 
/* drop-down menu link style */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
 
/* Styles of Move to Link */
.dropdown-content a:hover {background-color: #f1f1f1}
 
/* Show dropdown menu (add .dropdown-content class using JS) */
.show {display:block;}

js implements a drop-down menu with search — JavaScript code:

/* Click the button to set the display and hide the drop-down menu */
function myFunction() {
  ("myDropdown").("show");
}
 
/* Search function */
function filterFunction() {
  var input, filter, ul, li, a, i;
  input = ("myInput");
  filter = ();
  div = ("myDropdown");
  a = ("a");
  for (i = 0; i &lt; ; i++) {
    txtValue = a[i].textContent || a[i].innerText;
    if (().indexOf(filter) &gt; -1) {
      a[i]. = "";
    } else {
      a[i]. = "none";
    }
  }
}

This is the article about js implementing the drop-down menu with menu column search. For more related js implementing the drop-down menu with search, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!