HTML select 字段带过滤器

Question

I have a select field where a large amount of published names, could reach hundreds.

What I need is to filter the field, I mean:

That if one was selected and searched, displayed as sample texts for forms and with the possibility of writing a new search deleting the sample text searched before.

That fence as typing the text in the box will display the filtered list of options for the text.

An example would be: if I type D or d in the text box, it displays the list of options Daniel Diego, so for all, and that if you search with Diego then after loading the search text box appears as example Diego.

<select id="id_name" name="name">
    <option value="3">Diego </option>
    <option value="4">Daniel  </option>
    <option value="5">Fernando  </option>
    <option value="6">Luz </option>
    <option value="7">Catherine  </option>
    <option value="8">Samuel  </option>
    <option value="10">Eduardo  </option>
</select>

Answer 1

Try this.

Chosen is a jQuery plugin for the <select> html tag.

Not only does it make your select boxes look nicer, but it adds a very nice search feature at the top of the select box.

The source/demo is found here: http://harvesthq.github.com/chosen/

Answer 2

I guess this exactly what you're looking for

 /* When the user clicks on the button, toggle between hiding and showing the dropdown content */ 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"; } } }

 /* Dropdown Button */ .dropbtn { background-color: #04AA6D; color: white; padding: 16px; font-size: 16px; border: none; cursor: pointer; } /* Dropdown button on hover & focus */ .dropbtn:hover, .dropbtn:focus { background-color: #3e8e41; } /* The search field */ #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; } /* The search field when it gets focus/clicked on */ #myInput:focus {outline: 3px solid #ddd;} /* The container <div> - needed to position the dropdown content */ .dropdown { position: relative; display: inline-block; } /* Dropdown Content (Hidden by Default) */ .dropdown-content { display: none; position: absolute; background-color: #f6f6f6; min-width: 230px; border: 1px solid #ddd; z-index: 1; } /* Links inside the dropdown */ .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } /* Change color of dropdown links on hover */ .dropdown-content a:hover {background-color: #f1f1f1} /* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */ .show {display:block;}

 <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()"> <a href="#about">About</a> <a href="#base">Base</a> <a href="#blog">Blog</a> <a href="#contact">Contact</a> <a href="#custom">Custom</a> <a href="#support">Support</a> <a href="#tools">Tools</a> </div> </div>

Answer 3

If you want to go with jQuery then these are great UI options available :

https://select2.org/dropdown

https://jqueryui.com/selectmenu/

https://harvesthq.github.io/chosen/

---

If you want to use Vanilla JavaScript (without jQuery). This is the best option.

You can customise the colours and button layout as per your choice.

More info

 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"; } } }

 .dropbtn { background-color: #4CAF50; color: white; padding: 16px; font-size: 16px; border: none; cursor: pointer; } .dropbtn:hover, .dropbtn:focus { background-color: #3e8e41; } #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; 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;}

 <!DOCTYPE html> <h2>Basic Select Search/Filter Dropdown</h2> <p> Click 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">Select Here</button> <div id="myDropdown" class="dropdown-content"> <input type="text" placeholder="Search.." id="myInput" onkeyup="filterFunction()"> <a href="#about">About</a> <a href="#base">Base</a> <a href="#blog">Blog</a> <a href="#contact">Contact</a> <a href="#custom">Custom</a> <a href="#support">Support</a> <a href="#tools">Tools</a> </div> </div>