How to dynamic filter options of select with jQuery

Question

lt select  gt   lt option value  something  gt something lt  option gt   lt option value  something else  gt something else lt  option gt   lt  select gt   lt input type  text   gt    So that when user inputs something  only options with value matching the input will show

User · Answer

Example HTML    x000D   x000D    jQuery extension method  x000D  jQuery fn filterByText   function textbox    x000D    return this each function     x000D      var select   this  x000D      var options       x000D        select  find  option   each function     x000D        options push   x000D          value    this  val    x000D          text    this  text   x000D            x000D          x000D        select  data  options   options   x000D   x000D        textbox  bind  change keyup   function     x000D        var options     select  empty   data  options    x000D        var search     trim   this  val     x000D        var regex   new RegExp search   gi    x000D   x000D          each options  function i    x000D          var option   options i   x000D          if  option text match regex      null    x000D              select  append  x000D                  lt option gt    text option text  val option value  x000D               x000D            x000D            x000D          x000D        x000D     x000D   x000D     You could use it like this  x000D   x000D    function     x000D       select   filterByText    input     x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt select gt  x000D     lt option value  hello  gt hello lt  option gt  x000D     lt option value  world  gt world lt  option gt  x000D     lt option value  lorem  gt lorem lt  option gt  x000D     lt option value  ipsum  gt ipsum lt  option gt  x000D     lt option value  lorem ipsum  gt lorem ipsum lt  option gt  x000D   lt  select gt  x000D   lt input type  text  gt  x000D   x000D   x000D    Live demo here   http   www lessanvaezi com filter-select-list-options

User · Answer

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   quot gi quot             each options  function i            var option   options i           if  option text match regex      null                 var new option       lt option gt    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

User · Answer

lt script src  https   code jquery com jquery-1 10 2 js  gt  lt  script gt   lt script language  javascript  gt  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                   lt option gt    text option text  val option value                                         if  selectSingleMatch     true  amp  amp               select  children   length     1              select  children   get 0  selected   true                                function              selectorHtmlElement   filterByText     textboxFiltr2    true          lt  script gt

User · Answer

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   gt  -1

User · Answer

using Aaron s answer  this can be the short  amp  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

User · Answer

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

User · Answer

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   lt input id  search input  placeholder  Type to filter  gt   lt select id  theList  class  List  multiple  multiple  gt    or razor   Html ListBoxFor g   gt  g SelectedItem  Model items  new    class    List    id    theList       script   lt script type  text javascript  gt      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   gt   0           appendTo   theList     add it to list                 lt  script gt

User · Answer

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  lt  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                  lt option gt    text option text               val option value               allAttr option allAttr

User · Answer

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  lt  options length  i                 if  options i  text toUpperCase   indexOf filter   lt  0               options i   css  display    none           else              options i   css  display    block

User · Answer

I m not sure why you have more than one option with the same value  but this works   x000D   x000D    document  ready function     x000D       input   change function     x000D      var filter     this  val    x000D         option   each function     x000D        if    this  val      filter    x000D            this  show    x000D          else   x000D            this  hide    x000D          x000D           select   val filter   x000D         x000D       x000D     x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt select gt  x000D      lt option value  something1  gt something1 lt  option gt  x000D      lt option value  something1  gt something1 lt  option gt  x000D      lt option value  something2  gt something2 lt  option gt  x000D      lt option value  something2  gt something2 lt  option gt  x000D      lt option value  something2  gt something2 lt  option gt  x000D      lt option value  something3  gt something3 lt  option gt  x000D      lt option value  something3  gt something3 lt  option gt  x000D      lt option value  something3  gt something3 lt  option gt  x000D   lt  select gt  x000D   lt input type  text  placeholder  something1  gt  x000D   x000D   x000D

User · Answer

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

User · Answer

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                      lt option  gt    text option text  val option value

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

Examples related to javascript

Examples related to jquery

Examples related to dom