How to search in select tag html options without a plugin

Question

I made a select tag with html that contains all the names of countries, and I want to search for their values ​​using the search bar without any plugins or add-ons, is this possible?

Answer 1

Answer

Yes, you can, firstly, see it in action in this demo , if you like what you see, here's how to do it:

HTML

<input type="search" id="searchBox"> <select id="countries"> <option value="arg">Argentina</option> <option value="usa">United States of America</option> <option value="som">Somalia</option> </select> 

This is pretty straight forward, search input and selection with several options.

Javascript

 searchBox = document.querySelector("#searchBox"); countries = document.querySelector("#countries"); var when = "keyup"; //You can change this to keydown, keypress or change searchBox.addEventListener("keyup", function (e) { var text = e.target.value; var options = countries.options; for (var i = 0; i < options.length; i++) { var option = options[i]; var optionText = option.text; var lowerOptionText = optionText.toLowerCase(); var lowerText = text.toLowerCase(); var regex = new RegExp("^" + text, "i"); var match = optionText.match(regex); var contains = lowerOptionText.indexOf(lowerText) != -1; if (match || contains) { option.selected = true; return; } searchBox.selectedIndex = 0; } }); 

Explanation

Variables first:

• searchBox : link to the HTMLElement tab.
• countries : select the HTMLElement link.
• when : the type of event, I used "keyup", and this means that the selection will be updated when you click and raise the key in the SearchBox.
• text, lowerText : value of searchBox (in other words, input text). The second is the first, but the bottom is for checking case sensitivity.
• parameters . Object selection options.
• optionText, lowerOptionText : the text of the object option (ej. "Argentina"), and the other is the lower version for checking case sensitivity (ej. "argentina")
• regex . This is a RegExp Object , a regular expression, basically what it does is testing (case insensitive, due to the "i" in the second parameter) so that the line starts with some value, in this case it will be the input text.
• match : it executes the RegExp Object again the option text, this means that it will check whether the entered text is the same as the beginning of the option text.
• contains : it checks if the option text contains the entered text.

Few, it was a lot, so why do we need 2 tests? Since there are two choices with searchBox, one of them is that when you start typing “Unit ..”, it should match “United States of America” (regexp), and the other just enter “America.” and it should also comply with the "United States of America" ​​(contains)

So, he checks both tests, and if one of them is correct, he will choose this option. (He will also return so that he will not continue executing the code)

By default, if no test is true, it will select the first selection item.

Hope that helps :)

Answer 2

If you should not use a plug-in or a third-party script, you can create an array to fill in the parameters and search through the array using inarray http://api.jquery.com/jquery.inarray/ , then you will need a method to select the result and use the value of iterator to bind it to the appropriate option.

There is also this message: Search for selection parameters, find the value, add it to it and write its html text in the div

Answer 3

 Thank you @undefined In your code instead of making it selected i want to disabled it like display none. But display: none not working in IE11 What I did is disabled the un matched options and the hide them. After this I have sorted the options to show only enabled options on top. The code I have written is pasted below - please try to understand the logic I hope it will work to disabled the options use $("#addselect option")attr('disabled', 'disabled').hide and to again enable it use $("#addselect option").removeAttr('disabled').show(); sort by disabled options. $("#addselect option").each(function (i, val) { if ($(this)[i].disabled) { moveDown("selectId"); } else { moveUp("selectId"); } } function moveUp(selectId) { var selectList = document.getElementById(selectId); var selectOptions = selectList.getElementsByTagName('option'); for (var i = 1; i < selectOptions.length; i++) { var opt = selectOptions[i]; if (!opt.disabled) { selectList.removeChild(opt); selectList.insertBefore(opt, selectOptions[i - 1]); } } } function moveDown(selectId) { var selectList = document.getElementById(selectId); var selectOptions = selectList.getElementsByTagName('option'); for (var i = selectOptions.length - 2; i >= 0; i--) { var opt = selectOptions[i]; if (opt.disabled) { var nextOpt = selectOptions[i + 1]; opt = selectList.removeChild(opt); nextOpt = selectList.replaceChild(opt, nextOpt); selectList.insertBefore(nextOpt, opt); } } }