Creating a select box with a search option

Question

I am trying to replicate  what you can see here in this image    I want to be able to either type in the text field above the box or just click on the option directly   What would be the best way to go about that  Is there anything bootstrap related that exists already

User · Answer

You can use select2   it is the best js for this job  https   select2 org dropdown   x000D   x000D    document  ready function      x000D    change selectboxes to selectize mode to be searchable x000D        select   select2    x000D      x000D   lt html gt  x000D   lt head gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 2 1 jquery min js  gt  lt  script gt  x000D   lt link href  https   cdn jsdelivr net npm select2 4 0 13 dist css select2 min css  rel  stylesheet    gt  x000D   lt script src  https   cdn jsdelivr net npm select2 4 0 13 dist js select2 min js  gt  lt  script gt  x000D   x000D   lt  head gt  x000D   lt body gt  x000D     lt select id  select page  style  width 200px   class  operator  gt   x000D            lt option value    gt Select a Page    lt  option gt  x000D            lt option value  alpha  gt alpha lt  option gt   x000D            lt option value  beta  gt beta lt  option gt  x000D            lt option value  theta  gt theta lt  option gt  x000D            lt option value  omega  gt omega lt  option gt  x000D     lt  select gt  x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

Select2 http   select2 github io may be even better and more active than Chosen    See this comparison  http   sitepoint com jquery-select-box-components-chosen-vs-select2   I went for Select2  a few months ago  because Chosen had an issue when using Chinese characters via an IME http   github com harvesthq chosen issues 2663 It works great

User · Answer

I did my own version for bootstrap 4  If you want to use it u can check  https   github com AmagiTech amagibootstrapsearchmodalforselect  x000D   x000D  amagiDropdown                elementId   commonWords           searchButtonInnerHtml   Search           closeButtonInnerHtml   Close           title   Search and Choose           bodyMessage   Please firstly search with textbox below later double click the option you choosed           x000D   lt link href  https   stackpath bootstrapcdn com bootstrap 4 5 2 css bootstrap min css  rel  stylesheet   gt   lt div class  form-group  gt                   lt label for  commonWords  gt Favorite Word lt  label gt                   lt select id  commonWords  gt                   lt option value  1  gt claim     I claim to be a fast reader  but actually I am average  lt  option gt  lt option value  2  selected gt be     Will you be my friend  lt  option gt  lt option value  3  gt and     You and I will always be friends  lt  option gt                   lt  select gt   lt  div gt   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt   lt script src  https   cdn jsdelivr net npm popper js 1 16 1 dist umd popper min js  gt  lt  script gt   lt script src  https   stackpath bootstrapcdn com bootstrap 4 5 2 js bootstrap min js  gt  lt  script gt    lt script src  https   rawcdn githack com AmagiTech amagibootstrapsearchmodalforselect 9c7fdf8903b3529ba54b2db46d8f15989abd1bd1 amagidropdown js  gt  lt  script gt  x000D   x000D   x000D

User · Answer

Selectize Js has all options we require  Please Try It   x000D   x000D      document  ready function      x000D           select   selectize   x000D            sortField   text  x000D            x000D        x000D   lt html gt  x000D   lt head gt  x000D   lt script src  https   ajax googleapis com ajax libs jquery 3 4 1 jquery min js  gt  lt  script gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs selectize js 0 12 6 js standalone selectize min js  integrity  sha256- C0A5Ilqmu4QcSPxrlGpaZxJ04VjsRjKu G82kl5UJk   crossorigin  anonymous  gt  lt  script gt  x000D   lt link rel  stylesheet  href  https   cdnjs cloudflare com ajax libs selectize js 0 12 6 css selectize bootstrap3 min css  integrity  sha256-ze OEYGcFbPRmvCnrSeKbRTtjG4vGLHXgOqsyLFTRjg   crossorigin  anonymous    gt  x000D   lt  head gt  x000D   lt body gt  x000D     lt select id  select-state  placeholder  Pick a state     gt  x000D       lt option value    gt Select a state    lt  option gt  x000D       lt option value  AL  gt Alabama lt  option gt  x000D       lt option value  AK  gt Alaska lt  option gt  x000D       lt option value  AZ  gt Arizona lt  option gt  x000D       lt option value  AR  gt Arkansas lt  option gt  x000D       lt option value  CA  gt California lt  option gt  x000D       lt option value  CO  gt Colorado lt  option gt  x000D       lt option value  CT  gt Connecticut lt  option gt  x000D       lt option value  DE  gt Delaware lt  option gt  x000D       lt option value  DC  gt District of Columbia lt  option gt  x000D       lt option value  FL  gt Florida lt  option gt  x000D       lt option value  GA  gt Georgia lt  option gt  x000D       lt option value  HI  gt Hawaii lt  option gt  x000D       lt option value  ID  gt Idaho lt  option gt  x000D       lt option value  IL  gt Illinois lt  option gt  x000D       lt option value  IN  gt Indiana lt  option gt  x000D     lt  select gt  x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

This simple code worked for me   x000D   x000D   lt  DOCTYPE html gt  x000D   lt html gt  x000D   lt head gt  x000D   lt script src  https   ajax googleapis com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt  x000D   lt  head gt  x000D   lt body gt  x000D   lt input list  brow  gt  x000D   lt datalist id  brow  gt  x000D     lt option value  Internet Explorer  gt  x000D     lt option value  Firefox  gt  x000D     lt option value  Chrome  gt  x000D     lt option value  Opera  gt  x000D     lt option value  Safari  gt  x000D   lt  datalist gt    x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D    Incase you need to use only select tag use Selectize Js  It has all options we require  Please Try It Demo using Selectize Js

User · Answer

Here s a handy open source library I made earlier that uses jQuery  https   bitbucket org warwick searchablelist src master  And here is a working copy on my VPS  http   developersfound com SearchableList  The library is highly customisable with overridable behavours and can have seperate designs on the same web page Hope this helps

User · Answer

Full option searchable select box  This also supports Control buttons keyboards such as ArrowDown ArrowUp and Enter keys   x000D   x000D  function filterFunction that  event    x000D      let container  input  filter  li  input val  x000D      container     that  closest   searchable    x000D      input val   container find  input   val   toUpperCase    x000D   x000D      if    ArrowDown    ArrowUp    Enter   indexOf event key     -1    x000D          keyControl event  container  x000D        else   x000D          li   container find  ul li    x000D          li each function  i  obj    x000D              if    this  text   toUpperCase   indexOf input val   gt  -1    x000D                    this  show    x000D                else   x000D                    this  hide    x000D                x000D              x000D   x000D          container find  ul li   removeClass  selected    x000D          setTimeout function      x000D              container find  ul li visible   first   addClass  selected    x000D             100  x000D        x000D    x000D   x000D  function keyControl e  container    x000D      if  e key     ArrowDown     x000D   x000D          if  container find  ul li   hasClass  selected      x000D              if  container find  ul li visible   index container find  ul li selected      1  lt  container find  ul li visible   length    x000D                  container find  ul li selected   removeClass  selected   nextAll   not   style   display  none     first   addClass  selected    x000D                x000D   x000D            else   x000D              container find  ul li first-child   addClass  selected    x000D            x000D   x000D        else if  e key     ArrowUp     x000D   x000D          if  container find  ul li visible   index container find  ul li selected     gt  0    x000D              container find  ul li selected   removeClass  selected   prevAll   not   style   display  none     first   addClass  selected    x000D            x000D        else if  e key     Enter     x000D          container find  input   val container find  ul li selected   text    blur    x000D          onSelect container find  ul li selected   text    x000D        x000D   x000D      container find  ul li selected   0  scrollIntoView   x000D          behavior   smooth   x000D          x000D    x000D   x000D  function onSelect val    x000D      alert val  x000D    x000D   x000D      searchable input   focus function      x000D        this  closest   searchable   find  ul   show    x000D        this  closest   searchable   find  ul li   show    x000D      x000D      searchable input   blur function      x000D      let that   this  x000D      setTimeout function      x000D            that  closest   searchable   find  ul   hide    x000D         300   x000D      x000D   x000D    document  on  click     searchable ul li   function      x000D        this  closest   searchable   find  input   val   this  text    blur    x000D      onSelect   this  text    x000D      x000D   x000D      searchable ul li   hover function      x000D        this  closest   searchable   find  ul li selected   removeClass  selected    x000D        this  addClass  selected    x000D      x000D  div searchable   x000D      width  300px  x000D      float  left  x000D      margin  0 15px  x000D    x000D   x000D   searchable input   x000D      width  100   x000D      height  50px  x000D      font-size  18px  x000D      padding  10px  x000D      -webkit-box-sizing  border-box     Safari Chrome  other WebKit    x000D      -moz-box-sizing  border-box     Firefox  other Gecko    x000D      box-sizing  border-box     Opera IE 8     x000D      display  block  x000D      font-weight  400  x000D      line-height  1 6  x000D      color   495057  x000D      background-color   fff  x000D      background-clip  padding-box  x000D      border  1px solid  ced4da  x000D      border-radius   25rem  x000D      transition  border-color  15s ease-in-out  box-shadow  15s ease-in-out  x000D      background  url  data image svg xml charset utf-8  3Csvg xmlns  http   www w3 org 2000 svg  viewBox  0 0 4 5  3E 3Cpath fill   23343a40  d  M2 0L0 2h4zm0 5L0 3h4z   3E 3C svg 3E   no-repeat right  75rem center 8px 10px  x000D    x000D   x000D   searchable ul   x000D      display  none  x000D      list-style-type  none  x000D      background-color   fff  x000D      border-radius  0 0 5px 5px  x000D      border  1px solid  add8e6  x000D      border-top  none  x000D      max-height  180px  x000D      margin  0  x000D      overflow-y  scroll  x000D      overflow-x  hidden  x000D      padding  0  x000D    x000D   x000D   searchable ul li   x000D      padding  7px 9px  x000D      border-bottom  1px solid  e1e1e1  x000D      cursor  pointer  x000D      color   6e6e6e  x000D    x000D   x000D   searchable ul li selected   x000D      background-color   e8e8e8  x000D      color   333  x000D    x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt  x000D   lt div class  searchable  gt  x000D       lt input type  text  placeholder  search countries  onkeyup  filterFunction this event   gt  x000D       lt ul gt  x000D           lt li gt Algeria lt  li gt  x000D           lt li gt Bulgaria lt  li gt  x000D           lt li gt Canada lt  li gt  x000D           lt li gt Egypt lt  li gt  x000D           lt li gt Fiji lt  li gt  x000D           lt li gt India lt  li gt  x000D           lt li gt Japan lt  li gt  x000D           lt li gt Iran  Islamic Republic of  lt  li gt  x000D           lt li gt Lao People s Democratic Republic lt  li gt  x000D           lt li gt Micronesia  Federated States of  lt  li gt  x000D           lt li gt Nicaragua lt  li gt  x000D           lt li gt Senegal lt  li gt  x000D           lt li gt Tajikistan lt  li gt  x000D           lt li gt Yemen lt  li gt  x000D       lt  ul gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

This will done by using jquery  Here is the code    lt select class  chosen  style  width 500px   gt   lt option gt Html lt  option gt   lt option gt Css lt  option gt   lt option gt Css3 lt  option gt   lt option gt Php lt  option gt   lt option gt MySql lt  option gt   lt option gt Javascript lt  option gt   lt option gt Jquery lt  option gt   lt option gt Html5 lt  option gt   lt option gt Wordpress lt  option gt   lt option gt Joomla lt  option gt   lt option gt Druple lt  option gt   lt option gt Json lt  option gt   lt option gt Angular Js lt  option gt   lt  select gt   lt  div gt   lt script type  text javascript  gt      chosen   chosen     lt  script gt    Working Example Here

User · Answer

Use a data list instead    lt form action   action page php  method  get  gt         lt input list  browsers  name  browser  gt         lt datalist id  browsers  gt           lt option value  Internet Explorer  gt           lt option value  Firefox  gt           lt option value  Chrome  gt           lt option value  Opera  gt           lt option value  Safari  gt         lt  datalist gt         lt input type  submit  gt       lt  form gt    Not supported I E  9 and back  https   www w3schools com tags tryit asp filename tryhtml5 datalist

User · Answer

This will work for most of us  The answer given by Hemanth Palle is the easiest way to do it  It worked for me and the JS code wasn t necessary  The only problem that I ve found is that according to W3Schools  The datalist tag is not supported in Internet Explorer 9 and earlier versions  or in Safari    lt  DOCTYPE html gt   lt html gt   lt head gt   lt script src  https   ajax googleapis com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt   lt  head gt   lt body gt   lt input list  browsers  gt   lt datalist id  browsers  gt     lt option value  Internet Explorer  gt     lt option value  Firefox  gt     lt option value  Chrome  gt     lt option value  Opera  gt     lt option value  Safari  gt   lt  datalist gt     lt  body gt   lt  html gt

[javascript] Creating a select box with a search option

Examples related to javascript

Examples related to jquery

Examples related to html

Examples related to css

Examples related to html-select