Simple ComboBox Javascript component. It's written on pure JS.
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.
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;
height: 200px;overflow: auto;position: absolute;background-color: #fff;top: 18px;left: 0px;}
div.combobox .dropdownlist a {display: block;text-decoration: none;color: #000;
padding: 1px;height: 1em}
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}
</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:
Also, you don't need jQuery and this ComboBox fully compatible with jQuery.
If you want to tell me about bugs, please contact with me by e-mail zoonman at gmail dot com.
May 20, 2011