Filter options of select box using input box value

Question

I have a select box with some options in it and a input box. I have to filter the values of select box on the basis of the keyword entered in the text box.

JavaScript

function filter() {
 var keyword = document.getElementById("search").value;
 var select = document.getElementById("select");
 for (var i = 0; i < select.length; i++) {
 var txt = select.options[i].text;
 if (txt.substring(0, keyword.length).toLowerCase() !== keyword.toLowerCase() && keyword.trim() !== "") {
 select.options[i].style.display = 'none';
 } else {
 select.options[i].style.display = 'list-item';
 }
 }
}

HTML

<div>
 <div>
 <input type="text" id="search" name="search" style="margin: 10px;width: 165px;" onkeyup="filter()">
 </div>
 <div>
 <select id="select" size="10" style="margin: 10px; width: 165px;height: 170px;">
 <option>Cupcake</option>
 <option>Cunut</option>
 <option>Eclair</option>
 <option>Froyo</option>
 <option>Gingerbread</option>
 <option>Honeycomb</option>
 <option>Ice Cream Sandwich</option>
 <option>Jelly Bean</option>
 <option>KitKat</option>
 <option>Lollipop</option>
 <option>Marshmallow</option>
 <option>Nougat</option>
 </select>
 </div>
</div>

Is this the right way for this task?

Here is the working code for the scenario.

• michael.zech: Is it possible that it doesn't work with Internet Explorer? If tried your JSFiddle with IE 11 but it doesn't filter the option-items.
• Prabhat: @mizech yes you are right , its not working in IE , any suggestion to make it work in IE too.
• Prabhat: IE doesn't support style="display:none;" on <option>tags.
• michael.zech: Found this: stackoverflow.com/questions/20373558/… If jQuery is an option then have a look at the answer by " Gev ".
• michael.zech: Have added an answer!

Answer 1

A good attempt I must say, but there are other ways to achieve this.

Just so you know, select.option returns an optionCollection which can be cast to an array using Array.from(select.options).

Based on this, you can utilise the filter pre-defined function for an array object

var optionCollection = Array.from(select.options).filter(x => x.text.toLowerCase().startsWith(keyword.toLowerCase()))

this will get rid of the for..loopyou had. In addition, using filter function doesn't change the array but returns a new array with the filtered content.

The result from this can be used to replace the html of the select element i.e

$("#select").html(optionCollection)

Note: the above is JQuery

To effectively use the JQuery, you can embed this in a ternary operator

optionCollection.length > 0 ? $("#select").html(b) : $("#select").html(realCollection);

Note: the realCollection will be the initial select options collection.

I hope this helps

• PirateApp: the for loop is way better than the mapping and filter functions

Answer 2

I would start by moving the search term into the function definition, to save having to look up the DOM element. So I would change in the HTML

 <input type="text" id="search" name="search" style="margin: 10px;width: 165px;" onkeyup="filter(this.value)">

And then have function be defined with keyword as a parameter.

function filter(keyword) {
 ...
}

The other main change I would make is to use string.prototype.startsWith rather than substring checking, this is more explicit about what is trying to be done, and saves having logic to handle the empty string.

Also, rather than an If statement and then setting style.display, the display is set with either 'list-item' or 'none' with the ternary operator.

This leaves the function as

function filter(keyword) {
 var select = document.getElementById("select");
 for (var i = 0; i < select.length; i++) {
 var txt = select.options[i].text;
 var include = txt.toLowerCase().startsWith(keyword.toLowerCase());
 select.options[i].style.display = include ? 'list-item':'none';
 }
}

A further improvement you might want to look at may include moving the select element selection outside of this function to improve re-use.

• Prabhat: Thanks for the review. I first used String.prototype.startsWith() method but in MDN it is mentioned that the method is not supported in all javascript implementation so i used the workaround for that.
• Eterm: That's a good point about compatibility. Generally I prefer to use the method in the standards and then polyfil but avoiding that is understandable

Answer 3

I have tried to fix the Internet Explorer problem.

My code is a mixture of the question-code combined with the answer from "Gev" in this StackOverflow question: https://stackoverflow.com/questions/20373558/options-with-displaynone-not-hidden-in-ie

It still doesn't remove the options but they become disabled after leaving the textbox via tabulator key.

The view in Internet Explorer 11:

In Internet Explorer:

The adjusted code with jQuery:

function filter() {
 var keyword = document.getElementById("search").value;
 var select = document.getElementById("select");
 for (var i = 0; i < select.length; i++) {
 var txt = select.options[i].text;
 if (txt.substring(0, keyword.length).toLowerCase() !== keyword.toLowerCase() && keyword.trim() !== "") {
 $(select.options[i]).attr('disabled', 'disabled').hide();
 } else {
 $(select.options[i]).removeAttr('disabled').show();
 }
 }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
 <div>
 <input type="text" id="search" name="search" style="margin: 10px;width: 165px;" onkeyup="filter()">
 </div>
 <div>
 <select id="select" size="10" style="margin: 10px; width: 165px;height: 170px;">
 <option>Cupcake</option>
 <option>Cunut</option>
 <option>Eclair</option>
 <option>Froyo</option>
 <option>Gingerbread</option>
 <option>Honeycomb</option>
 <option>Ice Cream Sandwich</option>
 <option>Jelly Bean</option>
 <option>KitKat</option>
 <option>Lollipop</option>
 <option>Marshmallow</option>
 <option>Nougat</option>
 </select>
 </div>
</div>

• Prabhat: Thanks mizech , but my requirement is to hide the options.
• michael.zech: You're welcome. Sadly the nearest solution approach I could find. :(
• Prabhat: Found a workaround that also works in IE. Here is the link. It works fine in IE edge.
• michael.zech: Indeed. Tried it out and it works like charm on the IE 11 I got here. Heartly congrats ! And thanks for the update. :)

Answer 4

My code is based on the question-code of mizech in this StackOverflow question, I add focus() and setInterval() to achieve real time search and show all items when the input box is empty.

The view in IE:

enter image description here

The adjusted code with jQuery:

$("#search-case-name1").focus(
 function() {
 setInterval(
 function() {
 var keyword = document
 .getElementById("search-case-name1").value;
 var select = document.getElementById("case-name1");
 if (keyword.length > 0) {
 for (var i = 0; i < select.length; i++) {
 var txt = select.options[i].text;
 if (txt.substring(0, keyword.length)
 .toLowerCase() !== keyword
 .toLowerCase() &&
 keyword.trim() !== "") {
 $(select.options[i]).attr('disabled',
 'disabled').hide();
 } else {
 $(select.options[i]).removeAttr(
 'disabled').show();
 }
 }
 } else {
 for (var i = 0; i < select.length; i++) {
 $(select.options[i]).removeAttr('disabled')
 .show();
 }
 }
 }, 300);
 });

• t3chb0t: Could you correct the extreme indentations?