HTML combo box with option to type an entry

Question

I was under the impression you could type into a combo box besides selecting any values already in the list  However  I can t seem to find info on how to do this  Is there a property I need to add to it to allow typing of text

User · Answer

in HTML  you do this backwards  You define a text input   lt input type  quot text quot  list  quot browsers quot    gt   and attach a datalist to it   note the list attribute of the input    lt datalist id  quot browsers quot  gt     lt option value  quot Internet Explorer quot  gt     lt option value  quot Firefox quot  gt     lt option value  quot Chrome quot  gt     lt option value  quot Opera quot  gt     lt option value  quot Safari quot  gt   lt  datalist gt

User · Answer

Look at ComboBox or Combo on this site  http   www jeasyui com documentation index php

User · Answer

Well it s 2016 and there is still no easy way to do a combo     sure we have datalist but without safari ios support it s not really usable  At least we have ES6    below is an attempt at a combo class that wraps a div or span  turning it into a combo by putting an input box on top of select and binding the relevant events   see the code at  https   github com kofifus Combo   the code relies on the class pattern from https   github com kofifus New   Creating a combo is easy   just pass a div to it s constructor    x000D   x000D  let mycombo Combo New document getElementById  myCombo     x000D  mycombo options   first    second    third     x000D   x000D  mycombo onchange function e  combo    x000D    let val combo value  x000D       let val this value     same as above x000D    alert val   x000D     x000D   lt script src  https   rawgit com kofifus New master new min js  gt  lt  script gt  x000D   lt script src  https   rawgit com kofifus Combo master combo min js  gt  lt  script gt  x000D   x000D   lt div id  myCombo  style  width 100px height 20px   gt  lt  div gt  x000D   x000D   x000D

User · Answer

My solution is very simple  looks exactly like a native editable combobox and yet works even in IE6  some answers here require a lot of code or external libraries and the result is so so  e g  the text in the textbox goes behind the dropdown icon of the combobox  part or it doesn t look like an editable combobox at all    The point is to clip the combobox only the dropdown icon to be visible above the textbox  And the textbox is wide a bit underneath the combobox  part  so you don t see its right end - visually continues with the combobox  https   jsfiddle net dLsx0c5y 2   select programmoduleselect       clip  rect auto auto auto 331px       width  351px      height  23px      z-index  101       position  absolute     input programmodule       width  328px      height  17px      lt table gt  lt tr gt   lt th gt Programm   Modul  lt  th gt   lt td gt       lt select id  programmoduleselect          onchange  var textbox   document getElementById  programmodule    textbox value    this selectedIndex    -1        this options this selectedIndex  value   textbox select    fireEvent2 textbox   change             onclick  this selectedIndex   -1   gt           lt option value RFEM gt RFEM lt  option gt           lt option value RSTAB gt RSTAB lt  option gt           lt option value STAHL gt STAHL lt  option gt           lt option value BETON gt BETON lt  option gt           lt option value BGDK gt BGDK lt  option gt       lt  select gt       lt input name  programmodule  id  programmodule  value    autocomplete  off          onkeypress  if  event keyCode    13  return false     gt   lt  td gt   lt  tr gt  lt  table gt     Used originally e g  here  but don t send the form  old dlubal com WishedFeatures aspx    EDIT  The styles need to be a bit different for macOS  Ch is ok  for FF increase the combobox  height  Safari and Opera ignore the combobox  height so increase their font size  has an upper limit  so then decrease the textbox  height a bit   https   i stack imgur com efQ9i png

User · Answer

lt html gt   lt head gt       lt title gt  lt  title gt       lt script src  jquery-3 1 0 js  gt  lt  script gt       lt script gt            function                      selectnumber   change function                    alert   val             selectnumber   val        AND  html             selectnumber option selected   html        AND  text             selectnumber option selected   text                                     lt  script gt   lt  head gt   lt body gt          lt div gt           lt select id  selectnumber  gt               lt option value  1  gt one lt  option gt               lt option value  2  gt two lt  option gt               lt option value  3  gt three lt  option gt               lt option value  4  gt four lt  option gt           lt  select gt        lt  div gt      lt  body gt   lt  html gt      Thanks

User · Answer

Given that the HTML datalist tag is still not fully supported  an alternate approach that I used is the Dojo Toolkit ComboBox  It was easier to implement and better documented than other options I ve explored  It also plays nicely with existing frameworks  In my case  I added this combobox to an existing website that s based on Codeigniter and Bootstrap with no problems You just need to be sure to apply the Dojo theme  e g  class  claro   to the combo s parent element instead of the body tag to avoid styling conflicts   First  include the CSS for one of the Dojo themes  such as  Claro    It s important that the CSS file is included prior to the JS files below    lt link rel  stylesheet  href  https   ajax googleapis com ajax libs dojo 1 9 6 dijit themes claro claro css    gt    Next  include jQuery and Dojo Toolkit via CDN   lt script src  https   ajax googleapis com ajax libs jquery 1 10 2 jquery min js  gt  lt  script gt   lt script src  https   ajax googleapis com ajax libs dojo 1 10 3 dojo dojo js  gt  lt  script gt    Next  you can just follow Dojo s sample code or use the sample below to get a working combobox    lt body gt       lt  -- Dojo Dijit ComboBox with  Claro  theme -- gt       lt div class  claro  gt  lt input id  item name 1  class     gt  lt  div gt        lt script type  text javascript  gt            document  ready function                    In this example  dataStore is simply an array of JSON-encoded id name pairs             dataStore      id   43   name   Domain Name Renewal     id   42   name   Hosting Renewal                  require                     dojo store Memory    dijit form ComboBox    dojo domReady                      function  Memory  ComboBox                        var stateStore   new Memory                           data  dataStore                                              var combo   new ComboBox                           id   item name 1                           name   desc 1                           store  stateStore                          searchAttr   name                                                     item name 1                            startup                                            lt  script gt   lt  body gt

User · Answer

The dojo example here do not work when applied to existing code in most cases  Therefor I had to find an alternate  found here - hxxp   technologymantrablog com how-to-create-a-combo-box-with-text-input-jquery-autocomplete   now points to a spam site or worse   archive org  not very useful   Here is the jsfiddle - https   jsfiddle net ze7fgby7

User · Answer

This one is much smaller  doesn t require jquery and works better in safari  https   github com Fyrd purejs-datalist-polyfill   Check the issues for the modification to add a downarrow  https   github com Fyrd purejs-datalist-polyfill issues

User · Answer

None of the other answers were satisfying  largely because the UI still looks bad  I found this  which looks good and is very close to being perfect as well as customizable   A full list of examples and options and such can be found here  but here s a basic demo    x000D   x000D      editable-select   editableSelect    x000D   lt link href  https   cdn jsdelivr net npm jquery-editable-select 2 2 5 dist jquery-editable-select min css  rel  stylesheet   gt  x000D   x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt  x000D   lt script src  https   cdn jsdelivr net npm jquery-editable-select 2 2 5 dist jquery-editable-select min js  gt  lt  script gt  x000D   x000D   lt select id  editable-select  gt  x000D    lt option gt Alfa Romeo lt  option gt  x000D    lt option gt Audi lt  option gt  x000D    lt option gt BMW lt  option gt  x000D    lt option gt Citroen lt  option gt  x000D   lt  select gt  x000D   x000D   x000D

User · Answer

This link can help you  http   www scriptol com html5 combobox php  You have two examples  One in html4 and other in html5  HTML5   lt input type  text  list  browsers   gt    lt datalist id  browsers  gt       lt option gt Google lt  option gt       lt option gt IE9 lt  option gt    lt  datalist gt    HTML4    lt input type  text  id  theinput  name  theinput    gt    lt select name  thelist  onChange  combo this   theinput    gt      lt option gt one lt  option gt      lt option gt two lt  option gt      lt option gt three lt  option gt    lt  select gt     function combo thelist  theinput         theinput   document getElementById theinput        var idx   thelist selectedIndex       var content   thelist options idx  innerHTML       theinput value   content

User · Answer

Before datalist  see note below   you would supply an additional input element for people to type in their own option   x000D   x000D   lt select name  example  gt     lt option value  A  gt A lt  option gt     lt option value  B  gt B lt  option gt     lt option value  -  gt Other lt  option gt   lt  select gt    lt input type  text  name  other  gt  x000D   x000D   x000D   This mechanism works in all browsers and requires no JavaScript  You could use a little JavaScript to be clever about only showing the input if the  quot Other quot  option was selected  datalist Element The datalist element is intended to provide a better mechanism for this concept  In some browsers  e g  iOS Safari  lt  12 2  this was not supported or the implementation had issues  Check the Can I Use page to see current datalist support   x000D   x000D   lt input type  text  name  example  list  exampleList  gt   lt datalist id  exampleList  gt     lt option value  A  gt       lt option value  B  gt   lt  datalist gt  x000D   x000D   x000D

[html] HTML combo box with option to type an entry

Examples related to html

Examples related to combobox