github activity:

Philipp Tkachev
Software Developer
about me
Avatar

Editable ComboBox

Simple ComboBox Javascript component. It's written on pure JS and that means, this combobox doesn't have any dependencies.

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	{font-family: Tahoma;font-size: 12px}
	div.combobox	{position: relative;zoom: 1}
	div.combobox	div.dropdownlist	{display: none;width: 200px;
		border: solid 1px #000;background-color: #fff;
		height: 200px;overflow: auto;position: absolute;
		top: 18px;left: 0px;}
	div.combobox	.dropdownlist	a	{display: block;text-decoration: none;
		color: #000;padding: 1px;height: 1em;cursor: default}
	div.combobox	.dropdownlist	a.light	{color: #fff;
		background-color: #007}
	div.combobox	.dropdownlist, input {font-family: Tahoma;font-size: 12px;}
	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>
<!-- JS 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>

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

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.

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

Poll

Your choice is...

Social Sharing: