How to dynamic filter options of <select > with jQuery?

Question

<select >
<option value="something">something</option>
<option value="something_else">something else</option>
</select>
<input type="text" >

So that when user inputs something, only options with value matching the input will show.

Answer 1

Example HTML:

 //jQuery extension method: jQuery.fn.filterByText = function(textbox) { return this.each(function() { var select = this; var options = []; $(select).find('option').each(function() { options.push({ value: $(this).val(), text: $(this).text() }); }); $(select).data('options', options); $(textbox).bind('change keyup', function() { var options = $(select).empty().data('options'); var search = $.trim($(this).val()); var regex = new RegExp(search, "gi"); $.each(options, function(i) { var option = options[i]; if (option.text.match(regex) !== null) { $(select).append( $('<option>').text(option.text).val(option.value) ); } }); }); }); }; // You could use it like this: $(function() { $('select').filterByText($('input')); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select> <option value="hello">hello</option> <option value="world">world</option> <option value="lorem">lorem</option> <option value="ipsum">ipsum</option> <option value="lorem ipsum">lorem ipsum</option> </select> <input type="text">

Live demo here: http://www.lessanvaezi.com/filter-select-list-options/

Answer 2

I'm not sure why you have more than one option with the same value, but this works

 $(document).ready(function() { $('input').change(function() { var filter = $(this).val(); $('option').each(function() { if ($(this).val() == filter) { $(this).show(); } else { $(this).hide(); } $('select').val(filter); }) }) })

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select> <option value="something1">something1</option> <option value="something1">something1</option> <option value="something2">something2</option> <option value="something2">something2</option> <option value="something2">something2</option> <option value="something3">something3</option> <option value="something3">something3</option> <option value="something3">something3</option> </select> <input type="text" placeholder="something1">

Answer 3

Slightly different to all the other but I think this is the most simple:

$(document).ready(function(){

    var $this, i, filter,
        $input = $('#my_other_id'),
        $options = $('#my_id').find('option');

    $input.keyup(function(){
        filter = $(this).val();
        i = 1;
        $options.each(function(){
            $this = $(this);
            $this.removeAttr('selected');
            if ($this.text().indexOf(filter) != -1) {
                $this.show();
                if(i == 1){
                    $this.attr('selected', 'selected');
                }
                i++;
            } else {
                $this.hide();
            }
        });
    });

});

Answer 4

Much simpler code then most of the other solutions. Look for the text (case insensitive) and use CSS to hide/show the contents. Much better than storing a copy of the data.

Pass into this method the id of the select box, and id of the input containing a filter.

function FilterSelectList(selectListId, filterId)
{
    var filter = $("#" + filterId).val();
    filter = filter.toUpperCase();

    var options = $("#" + selectListId + " option");
    for (var i = 0; i < options.length; i++)
    {
       if (options[i].text.toUpperCase().indexOf(filter) < 0)
           $(options[i]).css("display", "none");
       else
           $(options[i]).css("display", "block");
    }
};

Answer 5

This is a simple solution where you clone the lists options and keep them in an object for recovery later. The scripts cleans out the list and add only the options that contains the input text. This should also work cross browser. I got some help from this post: https://stackoverflow.com/a/5748709/542141

Html

<input id="search_input" placeholder="Type to filter">
<select id="theList" class="List" multiple="multiple">

or razor

@Html.ListBoxFor(g => g.SelectedItem, Model.items, new { @class = "List", @id = "theList" })

script

<script type="text/javascript">
  $(document).ready(function () {
    //copy options
    var options = $('#theList option').clone();
    //react on keyup in textbox
    $('#search_input').keyup(function () {
      var val = $(this).val();
      $('#theList').empty();
      //take only the options containing your filter text or all if empty
      options.filter(function (idx, el) {
        return val === '' || $(el).text().indexOf(val) >= 0;
      }).appendTo('#theList');//add it to list
     });
  });
</script>

Answer 6

Update Lessan's answer to also keep the attributes of the options.

This is my first time answering on Stack Overflow so not sure if I should edit his answer or create my own.

jQuery.fn.allAttr = function() {
  var a, aLength, attributes, map;
  if (!this[0]) return null;
  if (arguments.length === 0) {
    map = {};
    attributes = this[0].attributes;
    aLength = attributes.length;
    for (a = 0; a < aLength; a++) {
      map[attributes[a].name.toLowerCase()] = attributes[a].value;
    }
    return map;
  } else {
    for (var propin arguments[0]) {
      $(this[0]).attr(prop, arguments[0][prop]);
    }
    return this[0];
  }
};


jQuery.fn.filterByText = function(textbox) {
  return this.each(function() {
    var select = this;
    var options = [];
    $(select).find('option').each(function() {
      options.push({ value: $(this).val(), 
        text: $(this).text(), 
        allAttr: $(this).allAttr() });
    });
    $(select).data('options', options);

    $(textbox).bind('change keyup', function() {
      var search = $.trim($(this).val());
      var regex = new RegExp(search, "gi");

      $.each($(select).empty().data('options'), function(i, option) {
        if (option.text.match(regex) !== null) {
          $(select).append(
            $('<option>').text(option.text)
            .val(option.value)
            .allAttr(option.allAttr)
          );
        }
      });
    });
  });
};

Answer 7

I had a similar problem to this, so I altered the accepted answer to make a more generic version of the function. I thought I'd leave it here.

var filterSelectOptions = function($select, callback) {

    var options = null,
        dataOptions = $select.data('options');

    if (typeof dataOptions === 'undefined') {
        options = [];
        $select.children('option').each(function() {
            var $this = $(this);
            options.push({value: $this.val(), text: $this.text()});
        });
        $select.data('options', options);
    } else {
        options = dataOptions;
    }

    $select.empty();

    $.each(options, function(i) {
        var option = options[i];
        if(callback(option)) {
            $select.append(
                $('<option/>').text(option.text).val(option.value)
            );
        }
    });
};

Answer 8

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script language='javascript'>
jQuery.fn.filterByText = function(textbox, selectSingleMatch) {
  return this.each(function() {
    var select = this;`enter code here`
    var options = [];
    $(select).find('option').each(function() {
      options.push({value: $(this).val(), text: $(this).text()});
    });
    $(select).data('options', options);
    $(textbox).bind('change keyup', function() {
      var options = $(select).empty().scrollTop(0).data('options');
      var search = $.trim($(this).val());
      var regex = new RegExp(search,'gi');

      $.each(options, function(i) {
        var option = options[i];
        if(option.text.match(regex) !== null) {
          $(select).append(
             $('<option>').text(option.text).val(option.value)
          );
        }
      });
      if (selectSingleMatch === true && 
          $(select).children().length === 1) {
        $(select).children().get(0).selected = true;
      }
    });
  });
};

  $(function() {
     $('#selectorHtmlElement').filterByText($('#textboxFiltr2'), true);
  });
</script>

Answer 9

You can use select2 plugin for creating such a filter. With this lot's of coding work can be avoided. You can grab the plugin from https://select2.github.io/

This plugin is much simple to apply and even advanced work can be easily done with it. :)

Answer 10

using Aaron's answer, this can be the short & easiest solution:

function filterSelectList(selectListId, filterId)
{
    var filter = $("#" + filterId).val().toUpperCase();

    $("#" + selectListId + " option").each(function(i){
       if ($(this).text.toUpperCase().includes(filter))
           $(this).css("display", "block");
       else
           $(this).css("display", "none");
    });
};

Answer 11

A much simpler way nowadays is to use the jquery filter() as follows:

var options = $('select option');
var query = $('input').val();
options.filter(function() {
    $(this).toggle($(this).val().toLowerCase().indexOf(query) > -1);
});  

Answer 12

Just a minor modification to the excellent answer above by Lessan Vaezi. I ran into a situation where I needed to include attributes in my option entries. The original implementation loses any tag attributes. This version of the above answer preserves the option tag attributes:

jQuery.fn.filterByText = function(textbox) {
  return this.each(function() {
    var select = this;
    var options = [];
    $(select).find('option').each(function() {
      options.push({
          value: $(this).val(),
          text: $(this).text(),
          attrs: this.attributes, // Preserve attributes.
      });
    });
    $(select).data('options', options);

    $(textbox).bind('change keyup', function() {
      var options = $(select).empty().data('options');
      var search = $.trim($(this).val());
      var regex = new RegExp(search, "gi");

      $.each(options, function(i) {
        var option = options[i];
        if (option.text.match(regex) !== null) { 
            var new_option = $('<option>').text(option.text).val(option.value);
            if (option.attrs) // Add old element options to new entry
            {
                $.each(option.attrs, function () {
                    $(new_option).attr(this.name, this.value);
                    });
            }
            
            $(select).append(new_option);
        }
      });
    });
  });
};

Answer 13

Given an input of type text with id #filter_keyword

And a select with id #all_keywords that you have previously populated

$(document).on('input', '#filter_keyword', function(event){
    var kw=$(this).val();
    $('#all_keywords > option').each(function() {
        if ( kw.length > 0 && this.text.replace(kw, '') == this.text )
        {
            $(this).hide();
        } else {
            $(this).show();                                 
        }
    });
});

That's it.

Answer 14

your solution is missing an escape string to use in RegExp for much better use.

function escapeRegExp(string) {
  return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // $& means the whole matched string
}

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions#escaping