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
0 1
anonymous
Hi Jason,I think your combo box looks good, I've been looking for something like this.Does your control support events?I would like to create a cascading combobox: one combobox would provide a filter for the next combobox. A common scenario, but not always easy. For it to work, i need to be able to trigger an event whenever the value on the first combo gets set (be that by typing an exact match and tabbing of the first combo or be selecting an item in the first combo with the mouse or by pressing enter).Best Regards,Peter
0 0
jasonj
I just updated the code to help support two events. The events could be implemented as follows, while initializing the combo box:
var combo = new STComboBox();

combo.onBlur = function(evt, value) {
    //the value is a string with the combo box value
    //this handler is called when focus is lost from the <input> box
};

combo.onSelect = function(evt, value) {
    //the value is a string containing the selected value
    //this handler is called when the <enter> key is pressed to
    //select a combo box value, or a combo box row is clicked
}
I added the code to call these handlers, but haven't yet tested it by putting together an example.

Does this help?
0 0
jasonj
Yes, this is possible. I'll see if I can get some sample code for this.
Design © 2014, Downranked, LLC.,
Original user code contributions under MIT License