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.

Answer 1

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.

Answer 2

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

Answer 3

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:

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

Answer 4

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:

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>