Your browser does not support JavaScript!
By jasonj
6
1

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).

To retrieve the value, you can do this:
var value = $('#collegesCombo-ddi').val();
or call a method:
var value = combo.getInput().val();
License
STComboBox is distributed under the MIT license.
Download
Browser Support
I'm still testing this in different browsers, but have seen success so far with IE8, IE11, Firefox 35, and Chrome 39.
Feedback
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?
vote
Comments
Design © 2014, Downranked, LLC.,
Original user code contributions under MIT License