Menu
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>
915
Operation - user will select Subject name from select dropdown- then click on any of the radio button (above, below, between) and then enter value in textbox --> click on Filter button then table should show the filtered data. below is the code i have tried. Check with below code.
Example. <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.."> Note: We use href="#" in this demo since we do not have a page to link it to. In real life this should be a real URL to a specific page.
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: https://harvesthq.github.io/chosen/
139
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
