<div class="dropdown">   <button onclick="myFunction()" class="dropbtn">Dropdown</button>   <div id="myDropdown" class="dropdown-content">     <input type="text" placeholder="Search..." id="myInput" onkeyup="filterFunction()">   </div> </div>

纳米搜索

纳米搜索：360推出的新一代AI搜索引擎

30

查看详情

#myInput {   box-sizing: border-box;   background-image: url('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; }  #myInput:focus {   outline: 3px solid #ddd; }  .dropdown {   position: relative;   display: inline-block; }  .dropdown-content {   display: none;   position: absolute;   background-color: #f6f6f6;   min-width: 230px;   border: 1px solid #ddd;   z-index: 1; }  .dropdown-content a {   color: black;   padding: 12px 16px;   text-decoration: none;   display: block; }  .dropdown-content a:hover {   background-color: #f1f1f1; }  .show {   display: block; }  .dropdown-content > .dropdown-option{   cursor: pointer; }  .dropdown-content > .selectedOption{   background-color: darkgray !important; }

*   从 JSON 数据动态生成下拉选项。 *   实现搜索过滤功能。 *   显示选中的选项。

function myFunction() {   var country = [       {         "ID": "001",         "Country_Name": "India"       },       {         "ID": "002",         "Country_Name": "Australia"       },       {         "ID": "003",         "Country_Name": "Austria"       },       {         "ID": "004",         "Country_Name": "China"       },       {         "ID": "005",         "Country_Name": "Bangladesh"       }   ];    document.getElementById("myDropdown").classList.toggle("show");   var ele = document.getElementById("myDropdown");    //for each country in the country array   for (var i = 0; i < country.length; i++) {     //creates an anchor element     const countryOption = document.createElement("a");     //holding the country ID in its value attribute     countryOption.setAttribute('value', country[i]['ID']);     //and the country Name as its innerText     countryOption.innerText = country[i]['Country_Name'];     //adds the class dropdown-option to the option element     countryOption.classList.add('dropdown-option');      //binds the countryOnClick function defined below as its click event handler     countryOption.addEventListener('click', countryOnClick);      //appends the new anchor to the dropdown element     ele.appendChild(countryOption);   } }  //click event handler for the dropdown options function countryOnClick(event){    //fetch country properties from the element triggering the event   const clickedOption = event.target;   const countryID = clickedOption.getAttribute('value');   const countryName = clickedOption.innerText;    //removes the selectedOption class to every option in the dropdown   clickedOption.closest('div').querySelectorAll('.dropdown-option').forEach((o,i)=>{     o.classList.remove('selectedOption');   });   //adds the selectedOption class to the selected option element   clickedOption.classList.add('selectedOption');    //show those data on console   console.log(`${countryID} - ${countryName}`);    console.log( getSelectedOption() ); }  function getSelectedOption(){   return document.querySelector('#myDropdown > .dropdown-option.selectedOption'); }  //gets called when the filter input changes, and it filters the dropdown options list 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";     }   } }

大家都在看：