How can I create an editable combo box in HTML Javascript

Question

I need to let users select an item from a dropdown list  but also allow them to instead enter any text  even if it doesn t match an item in the list  How can I achieve this on a web page with HTML and Javascript   The select field doesn t let users enter text  and the input text field doesn t show the preferred alternatives   All items must show if the user opens the dropdown  so it can t be a simple auto-complete that only shows matching items

User · Answer

I know this question is already answered, a long time ago, but this is for other people that may end up here and are having trouble finding what they need. I had trouble finding an existing plugin that did exactly what I needed, so I wrote my own jQuery UI plugin to accomplish this task. It's based on the combobox example on the jQuery UI site. Hopefully it might help someone.

https://github.com/tmooney3979/jquery.ui.combify

User · Answer

Here is a script for that  Demo  Source  Or another one which works slightly differently  link removed  site no longer exists

User · Answer

I think this will meet your requirements   https   github com RUPOJS jsCombo

User · Answer

try doing this    lt div style  position  absolute top  32px  left  430px   id  outerFilterDiv  gt   lt input name  filterTextField  type  text  id  filterTextField  tabindex  2   style  width  140px      position  absolute  top  1px  left  1px  z-index  2 border none     gt           lt div style  position  absolute   id  filterDropdownDiv  gt   lt select name  filterDropDown  id  filterDropDown  tabindex  1000      onchange  DropDownTextToBox this  filterTextField     style  position  absolute      top  0px  left  0px  z-index  1  width  165px   gt       lt option value  -1  selected  selected  disabled  disabled  gt -- Select Column Name -- lt  option gt   lt  select gt               please look at following example fiddle

User · Answer

Was looking for an Answer as well  but all I could find was outdated   This Issue is solved since HTML5  https   developer mozilla org en-US docs Web HTML Element datalist   lt label gt Choose a browser from this list   lt input list  browsers  name  myBrowser    gt  lt  label gt   lt datalist id  browsers  gt     lt option value  Chrome  gt     lt option value  Firefox  gt     lt option value  Internet Explorer  gt     lt option value  Opera  gt     lt option value  Safari  gt     lt option value  Microsoft Edge  gt   lt  datalist gt    If I had not found that  I would have gone with this approach   http   www dhtmlgoodies com scripts form widget editable select form widget editable select html

User · Answer

You can try my implementation of editable combobox  http   www zoonman com projects combobox

User · Answer

Forget datalist element that good solution for autocomplete function  but not for combobox feature   css    combobox       display  inline-block      position  relative      combobox select       display  none      position  absolute      overflow-y  auto      html    lt div class  combobox  gt       lt input type  number  name    value    min    max    step     gt  lt br  gt       lt select size  3  gt           lt option value  0  gt  0 lt  option gt           lt option value  25  gt  25 lt  option gt           lt option value  40  gt  40 lt  option gt       lt  select gt   lt  div gt    js  jQuery        combobox   each function         var          input     this  find  input             select     this  find  select        function hideSelect             setTimeout function                 if    select is   focus    amp  amp    input is   focus                       select                      hide                        css  z-index   1                            20              input          focusin function                 if    select is   visible                       select                      outerWidth  input outerWidth                         show                        css  z-index   100                                     focusout hideSelect           on  input   function                  select val                       select          change function                  input val  select val                         focusout hideSelect         This works properly even when you use text input instead of number

[javascript] How can I create an editable combo box in HTML/Javascript?

Examples related to javascript

Examples related to html

Examples related to combobox

Examples related to drop-down-menu