STComboBox: A Lightweight jQuery Combo Box

I've completely rewritten DDComboBox. The result is a lightweight (~5kb minified) combo box that is easy to use, modify, and style.

Demo

You can see the combo box in action here.

Basic Usage

Create a container for the combo box (and a label if you want):

<label for="collegesCombo-ddi">Colleges</label>
<span id="collegesCombo"></span>

and then initialize the combo box using some JavaScript:

$(document).ready(function() {
    var combo = new STComboBox();
    combo.Init('collegesCombo');         //ID of a <span> or <div>
    var data = [];

    var colleges = [
        "A T Still University of Health Sciences",
        "Abilene Christian University",
        "Abraham Baldwin Agricultural College"    
    ];

    for(var i=0; i < colleges.length; i++) {
        data.push({id: i, text: colleges[i]});
    }
    combo.populateList(data);
});

Inside the <span>, an <input> field will be created, with the ID of collegesCombo-ddi (drop-down input).

Get the Value

To retrieve the value, you can use jQuery to select the <input> element's value:

var value = $('#collegesCombo-ddi').val();

This is because when the input box is created in the JavaScript code, it's given an ID using the container ID you specified, followed by -ddi.

You can also call a method on the combo object:

var value = combo.getInput().val();

Clear the Value

To clear the combo box, just set the input value to an empty string:

$('#collegesCombo-ddi').val('');

or

combo.getInput().val('');

License

STComboBox is distributed under the MIT license.

Download

The files are available here.

The source is also available on GitHub.

Browser Support

I'm still testing this in different browsers, but have seen success so far with IE8, IE11, Firefox 35, and Chrome 39.