Your browser does not support JavaScript!
By jasonj

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.
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]});
Inside the <span>, an <input> field will be created, with the ID of collegesCombo-ddi (drop-down input).

To retrieve the value, you can do this:
var value = $('#collegesCombo-ddi').val();
or call a method:
var value = combo.getInput().val();
STComboBox is distributed under the MIT license.
Browser Support
I'm still testing this in different browsers, but have seen success so far with IE8, IE11, Firefox 35, and Chrome 39.
I'd love to hear your feedback. Feel free to comment below (anonymously if you like) or hit me up on twitter @Jasonprogrammer.
Was this helpful?
Design © 2014, Downranked, LLC.,
Original user code contributions under MIT License