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.

You *could* do that on your own (hint: replace the select with your own HTML, that behaves just like a select box), but why inventing the wheel again? http://jqueryui.com/demos/autocomplete/ — Boldewyn, Jun 16 '10 at 09:42
@Boldewyn: Too bad you didn't put this into an answer. Because this actually is the same control OP is asking for. Demo page actually shows it on ComboBox that acts as normal select + data enter. — Robert Koritnik, Sep 03 '12 at 17:04
@RobertKoritnik Ah, yes. But they added that example more recently than my answer. Back in '10 it was a brand-new widget. — Boldewyn, Sep 04 '12 at 08:45
You'll see some suggestions for this here on this site: http://stackoverflow.com/questions/2141357/html-editable-select-element/13468539#13468539 — camster, Dec 08 '12 at 10:53
possible duplicate of [How can I create an editable dropdownlist in HTML?](http://stackoverflow.com/questions/264640/how-can-i-create-an-editable-dropdownlist-in-html) — Ed Ballot, Jul 30 '15 at 21:51
Possible duplicate of [HTML combo box with option to type an entry](http://stackoverflow.com/questions/14614702/html-combo-box-with-option-to-type-an-entry) — The Guy with The Hat, Mar 27 '17 at 15:46
W3C sample: https://www.w3.org/TR/wai-aria-practices-1.2/examples/combobox/combobox-autocomplete-list.html — Daniel Yang, Nov 24 '21 at 02:40

score 13 · Accepted Answer · edited Dec 01 '16 at 14:00

13

Here is a script for that: Demo, Source

Or another one which works slightly differently: link removed (site no longer exists)

edited Dec 01 '16 at 14:00

Herberts Markūns

119
2
11

answered Jun 16 '10 at 09:41

Tom Gullen

61,249
84
283
456

1

Thanks! I'm going with the first script. – Christian Davén Jun 16 '10 at 10:17
@ChristianDavén Where did you find the source js script in the first link? – shapeare Jan 29 '15 at 13:48
@shapeare, I can't remember, sorry! – Christian Davén Jan 29 '15 at 13:53

score 9 · Answer 2 · answered Feb 10 '13 at 02:01

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

score 4 · Answer 3 · answered Dec 01 '16 at 16:34

4

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

<label>Choose a browser from this list:
<input list="browsers" name="myBrowser" /></label>
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Internet Explorer">
  <option value="Opera">
  <option value="Safari">
  <option value="Microsoft Edge">
</datalist>

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

answered Dec 01 '16 at 16:34

Jook

4,564
3
26
53

How does the html5 datalist meet the requirement of editable? – Josef.B Mar 21 '17 at 22:45
2

This approach creates a regular input field, in which you can type, but which also shows suggestions while you type (or, when you click in the input field twice when it is empty, once to focus and then a second time, shows the entire list). At least this is how Firefox renders it. Here's an example: https://jsfiddle.net/6hyrjvvb/ – Matthijs Kooijman Sep 05 '17 at 15:00
Does not work on FireFox Android browser – Graphic Equaliser Apr 19 '23 at 13:29

score 3 · Answer 4 · answered Apr 15 '13 at 16:54

3

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

answered Apr 15 '13 at 16:54

zoonman

1,116
1
12
30

Thank you for doing this! It seems simple enough! – relipse Oct 19 '13 at 22:39

score 2 · Answer 5 · answered Aug 07 '13 at 07:05

2

I think this will meet your requirements:

https://github.com/RUPOJS/jsCombo

answered Aug 07 '13 at 07:05

RSS

31
2

1

That's a link only answer, so please add more information, as the page the links is pointing to might vanish. – Beryllium Aug 07 '13 at 07:23
thanks buddy this was actually I was looking for. :) – Vishrant Nov 20 '13 at 08:14

Nagy Zoltán · Answer 6 · 2017-12-19T13:29:38.283

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:

<div class="combobox">
    <input type="number" name="" value="" min="" max="" step=""/><br/>
    <select size="3">
        <option value="0"> 0</option>
        <option value="25"> 25</option>
        <option value="40"> 40</option>
    </select>
</div>

js (jQuery):

$('.combobox').each(function() {
    var
        $input = $(this).find('input'),
        $select = $(this).find('select');
    function hideSelect() {
        setTimeout(function() {
            if (!$select.is(':focus') && !$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.

I have made a little modification for better behaviour when we have more than one comboboxes. — Nagy Zoltán, Dec 19 '17 at 12:38

score 0 · Answer 7 · answered Oct 08 '13 at 04:50

0

try doing this

<div style="position: absolute;top: 32px; left: 430px;" id="outerFilterDiv">
<input name="filterTextField" type="text" id="filterTextField" tabindex="2"  style="width: 140px;
    position: absolute; top: 1px; left: 1px; z-index: 2;border:none;" />
        <div style="position: absolute;" id="filterDropdownDiv">
<select name="filterDropDown" id="filterDropDown" tabindex="1000"
    onchange="DropDownTextToBox(this,'filterTextField');" style="position: absolute;
    top: 0px; left: 0px; z-index: 1; width: 165px;">
    <option value="-1" selected="selected" disabled="disabled">-- Select Column Name --</option>
</select>

please look at following example fiddle

answered Oct 08 '13 at 04:50

atom217

971
1
14
26

2

The question was how to make combobox editable, you have just overlapped textbox over combobox. This is not the proper solutionI think. – Vishrant Nov 15 '13 at 07:22
works perfectly fine when you do not want to use customized buttons. ie to use default set of button provided with browser – atom217 Nov 20 '13 at 07:23
@Vishrant no, he overlapped a textbox on top of a *dropdown/select* to create a *combination* *box* – Ron Newcomb Feb 14 '17 at 22:10
But it doesn't work. add some – Ron Newcomb Feb 14 '17 at 22:11

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

7 Answers7

Linked