Editable ComboBox

Demo

There is a demo of two combo box dropdown lists with text input in javascript:

This component is replacement for regular combobox when you need suggesting values or autocomplete. Also it can be used when you need to have oportunity enter new value if it not presented in the list.

The drop-down list is keyboard sensitive with the following keybindings:

• Up: Previous option
• Down: Next option
• Enter: Select the current option

Additionally, options are auto-selected and match highlited by typing within the input box. You can cut, copy or paste text to and from this combobox. You also can use undo and redo operations.

How to use it

For working with it, you should create html code like this:

<!-- You may redefine styles -->
<style type="text/css" media="screen">
div.combobox, div.combobox .dropdownlist, div.combobox input  { 
	font-family: Tahoma; 
	font-size: 12px
}

div.combobox	{
	position: relative; 
	zoom: 1
}

div.combobox div.dropdownlist {
	display: none;
	overflow: auto;
	position: absolute;
	top: 18px;
	left: 0px;
	width: 200px;
	height: 200px;
	border: solid 1px #000;
	background-color: #fff;
}

div.combobox .dropdownlist a {
	display: block;
	text-decoration: none;
	color: #000;
	padding: 1px;
	height: 1em;
	line-height: 1;
	cursor: default;
}

div.combobox .dropdownlist a.light {
	color: #fff;
	background-color: #007;
}

div.combobox input {
	float: left;
	width: 182px;
	border: solid 1px #ccc;
	height: 15px;
}

div.combobox span {
	border: solid 1px #ccc;
	background: #eee;
	width: 16px;
	height: 17px;
	float: left;
	text-align: center;
	border-left: none;
	cursor: default
}
</style>

<!-- HTML code -->
<div class="combobox">
	<input type="text" name="comboboxfieldname" id="cb_identifier">

	<span>▼</span>
	<div class="dropdownlist">
		<a>Item1</a>
		<a>Item2</a>

		<a>Item3</a>
	</div>
</div>
<!-- JavaScript code -->
<script type="text/javascript" charset="utf-8" src="combobox.js"></script>
<script type="text/javascript" charset="utf-8">

var no = new ComboBox('cb_identifier');
</script>

• Download combobox.js (unzip archive)
• Or fork a Repository

Sources deployed under BSD License. It's free for using in commercial projects.

Tested with:

• IE6,IE8+
• Firefox 4+
• Google Chrome 8, 11
• Safari 5.0.2, 5.0.4
• Opera 9.63, 10.10, 11.10
• also works on iOS (iPhone, iPod Touch)

Also, you don't need jQuery and this ComboBox fully compatible with jQuery.

May 20, 2011

A modern approach to make a dropdown list

Nowadays you can use the datalist tag to supply input field with options:

<input list="states" name="state-choice" />

<datalist id="states">
    <option value="Maine">
    <option value="Maryland">
    <option value="Massachusetts">
</datalist>

Have a look at working example:

Almost all modern browsers adopted support of datalist tag and you don't need JavaScript to implement autosuggest list anymore.

If you are looking for really powerful component, checkout select2.

Comments:

Lautaro:

2013-03-08 00:18:40

I've just downloaded your "Editable ComboBox" and embedded in an application that I currently have under development.
It behaves exactly the way I needed it to do and integration with my app was very smooth with no impact at all, very little changes were required.
I have already tried yesterday night to develop something similar but mine is weird, raw and ugly compared with yours :-) since my js knowledge level is very low.

I wanted to say thank you for sharing your work with us.

zoonman:

2013-09-21 05:40:39

Now I'm working on creating replacement for standard html select.

ivannaxara:

2015-04-15 09:24:02

Hi, I´m using you´r tool, and i´m very satisfied with it, but I have a little problem with IE browser, when I click in 1 of the links it scrolls me till the bottom of my page, btw I´ve already tested your examples up here and they´re running without that "weird" scroll.
Thanks for that code.

jeffreytp:

2015-07-27 20:21:41

You code works for me, thanks! One question though, if I wanted to created a default selected value, how would I do that?

Glidias:

2016-01-06 04:50:23

Some fixes/mods https://github.com/Glidias/zoonmanEditableComboBox/blob/master/combo.js

josepablois:

2016-02-17 08:45:02

I am using your tool, but I need order elements in the list, how can i do it? I test in combobox.js. but it doesn't work. Thanks.

zoonman:

2017-11-11 22:26:43

josepablois, you can pre-sort items initially before placing them into HTML. Or use native array sort function.

satti:

2017-11-21 22:15:53

I am using this as a replacement of data list. Its work for me thanks.

satti:

2017-11-21 23:03:13

There is one issue I found so far regarding filtering when ever I am try to do filter dropdown data its not working for like "abac | aa" type string where I have added one | bt two filed.Could you please provide me a solution for that thanks.

zoonman:

2017-11-21 23:38:03

Satti, do you want to filter list by pipe-separated words?
Could you provide me example, please?

hari:

2018-07-01 10:14:56

how to change background color of on hover

hari:

2018-07-01 19:03:11

In mobiles, When I selected one option and trying to click dropdown but dropdown comes and disappearing in fraction of a second how to fix it

zoonman:

2018-07-01 20:16:04

To change the color of hover you should define a CSS class like this:

div.combobox .dropdownlist a.light {
background-color: green
}

This version currently is not accommodated for mobile usage.
I recommend to use datalist tag for mobile usage. I will add that example.

For commenting you should proceed to enter or register on the site.