How search into options of select tag html without plugin

Question

I made select tag with html which contain all the names of the countries and I want to search into their values with search bar without any plugins or add-on is that possible ?

Answer 1

Answer

Yes you can, first, 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>

It's pretty straight forward, a search input and a select with a few 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

First, the variables:

• searchBox : link to the HTMLElement search input.
• countries : link to the HTMLElement select.
• when : event type, I used "keyup" and that means the select will update when you press and lift a key in the searchBox.
• text, lowerText : The value of the searchBox (in other words, the input text). The second one equals the first but lowercased for case insensitive testing.
• options : The select options objects.
• optionText, lowerOptionText : The text of the option object (ej. "Argentina") and the other one is the lower version for case insensitive testing (ej. "argentina")
• regex : It's a RegExp Object, a regular expression, basically what it does is it tests (case insensitive, because of the 'i' in the second parameter) wether the some string begins with some value, in this case, the value would be the input text.
• match : It executes the RegExp Object agains the option's text, that means it will test if the inputted text is the same as the beggining of the option's text.
• contains : It checks if the option's text contains the inputted text.

Few, that was a lot, so, why do we need 2 tests? Because there are two possibilities for selection with searchBox, one is that when you start typing "Unit.." it should match "United States of America"(regexp), and the other one is that you just type "america" and it should also match "United States of America"(contains)

So, it checks for both tests, and if either one is true it will select that option. (It will also return so that it doesn't continue executing code)

By default, if no test is true, it will select the first element of the select.

Hope that helps :)