JaxCore's ComboBox is designed to be an integral part of any website form. It is a combination of a text box, and a drop-down menu. You are already familiar with these controls, they are commonly used in desktop software. However the HTML specification provides no such form control. We have done our best to make a JavaScript implementation of a ComboBox that is easy to integrate, small, fast, reliable, and flexible enough to be used in almost any scenario. We are also working on adding full iPhone support.

What's the Problem?

Consider a form where you need to select from a list of foods. You'd probably use a select box (dropdown menu) such as this:

<select name="foods">
<option value="Hamburger">Hamburger</option>
<option value="French Fries">French Fries</option>
<option value="Hot Dog">Hot Dog</option>
</select>

If you want to have the option of typing in a food that's not in the list? You have to add a text box, another menu item, and to do it right you'd also add validation to only display the "other" text field if the "other" dropdown item is selected:

<select name="foods" 
onchange="document.getElementById('otherfield').style.display = 
(this.options[this.selectedIndex].value=='other')?'block':'none'">
<option value="Hamburger">Hamburger</option>
<option value="French Fries">French Fries</option>
<option value="Hot Dog">Hot Dog</option>
<option value="other">(other, please type below)</option>
</select><br>
<div id="otherfield" style="display:none;">
Other: <input name="other" type="text"></div>

As you can see, things are starting to get complicated. Hiding, and showing fields like is clunky, and can sometimes be confusing to users, and difficult to maintain a clean design. You are also adding hard-coded logic into a form that can't be reused, and must be specifically modified whenever new items are added.

What's the Solution?

The solution is to use a JavaScript-powered ComboBox component, a combination of a drop-down menu and a text box:

<script type="text/javascript">
document.write(new ComboBox('foods',{
	items:['Hamburger','French Frieds','Hot Dog']
}));
</script>

This gives you the best of both worlds. Not only is it easier (and less typing!) to implement than separate SELECT and TEXT controls, ComboBox can simplify your server-side code because you have only one input instead of two. ComboBox only makes only the TEXT input part of the form, not the options.

You can simplify the code further using the create method which creates an new instances and writes it to the page at the same time

<script type="text/javascript">
ComboBox.create('foods',{items:['Hamburger','French Frieds','Hot Dog']});
</script>

Simplify Your Server-Side Code

Programming a regular HTML select box to auto-select a particular option can also be a cumbersome task. In PHP you have to loop through an array of values and then add a SELECTED attribute to the appropriate OPTION tag. You probably end up with code like this all over your application regardless of which programming language you use:

<select name="numbers">
<?
$options = array(1,2,3,4,5);
$defaultValue = 3;
for ($i=0;$i<count($options);$i++) {
	$value = $options[$i];
	$selected = ($value==$defaultValue)? 'selected':'';
	echo "<option value=\"$value\" $selected>$value</option>";
}
?>
</select>

When using ComboBox, server-side code like above is entirely redundant. Auto-selection is built into ComboBox using an optional value parameter:

ComboBox.create('numbers',{
	items:[1,2,3,4,5],
	value:3
});

Efficiency and Speed

We gain some other distinct advantages too. The ComboBox supports auto-complete and keyboard navigation, allowing you to quickly narrow down and select results. ComboBoxes also have some drastic efficiency gains especially when the same menu must be displayed many times in the page. Instead of duplicating the raw SELECT & OPTION html tags, Because ComboBox uses a simple JavaScript string array to build its list of items the same array can be reused:

var months = ['January','February','March','April','May','June','July',
'August','September','October','November','December'];
document.write(new ComboBox('month1',{items:months,value:'Janurary'})+'<br>');
document.write(new ComboBox('month2',{items:months,value:'February'})+'<br>');
document.write(new ComboBox('month3',{items:months,value:'March'})+'<br>');
document.write(new ComboBox('month4',{items:months,value:'April'}));

Try doing that with HTML! This is a fraction of the amount of HTML code that is ncessary to do the same thing.

Date Picker

Here's how a date picking component can be created using 3 ComboBoxes (also uses the size parameter to fit things nicely):

var date = new Date();
var months = ['January','February','March','April','May','June','July',
'August','September','October','November','December'];
var thismonth = months[date.getMonth()];
ComboBox.create('months', {items:months, value:thismonth, size:12});
var days = [];
for (var i=1;i<=31;i++) days.push(i);
var thisday = date.getDate();
ComboBox.create('date', {items:days, value:thisday, size:3});
var thisyear = date.getFullYear();
var years = [];
for (var i=thisyear-5; i<=thisyear+5; i++) years.push(i);
ComboBox.create('years', {items:years,value: thisyear, size:5});

Cascading

Here's where the fun starts. With standard select menu's it is notoriously annoying to create dropdown menus that cascade to one another. With ComboBox you can use a single JavaScript dataset, and use ComboBox's onChange event handler, and setItems method:

var lang = {
	'English' : ['one','two','three','four','five'],
	'French' : ['un','deux','trois','quatre','cinq'],
	'Spanish' : ['uno','dos','tres','cuatro','cinco'],
	'German' : ['eins','zwei','drei','vier','fünf']
};
var langCombo = new ComboBox('language',{
	items : keys(lang),
	onChange : function() {
		numbersCombo.setItems(lang[this.getValue()]);
	}
});
document.write(langCombo);
var numbersCombo = new ComboBox('langnumber');
document.write(numbersCombo);

External Data Files

Last but not least, ComboBox can link to external JavaScript files for its list of options using the itemsurl parameter. Here is an example that links to a list of countries (countries.js):

ComboBox.create('country', {itemsurl:'countries.js'});

Use this technique together with cascading and database powered JavaScript "Ajax" services and you have yourself and extremely powerful form building tool.

	Security Note * The next page will look like this.

After you purchase you will recieve a link to download the product.

Here's What You Get:

• ComboBox JavaScript component source code
• lots of examples, data files, advanced use cases
• Full support - contact us if you need support for new/old browsers, feature requests, or any problems integrating with your site or application
• Free updates - we're continually improving this codebase

Get It For Free!

ComboBox is included for FREE with our Worldwide City Picker Component. It uses 3 instances of ComboBox and a custom generated list of every country, state/province, and city in the entire world.