Your browser does not support JavaScript!
Upvotes Anonymous 18 User 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).
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
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?

Comments

Byanonymous Anonymous 0 User 1
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
Byjasonj Anonymous 1 User 0
Yes, this is possible. I'll see if I can get some sample code for this.
Byjasonj Anonymous 0 User 0
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?
Byanonymous Anonymous 0 User 1
Hi Jason,

I was very happy to stumble upon this code.  I have a question, though.  Do I  have to pass an element ID when initializing or can I pass a class?  I plan to have 30 or more drop downs on a page that have the same selections.

Thanks for your help,

Jason N.
Byanonymous Anonymous 0 User 0
The dropdown initialization only takes an ID. Could you do something like this?
$('.yourclass').each(function() {
    var id = $(this).attr('id');
    //initialize the dropdown using the ID
})
Byanonymous Anonymous 0 User 0
Thanks for the reply.

I will probably end up having to do something like that.  The drop downs will be created on the fly, the user having the ability to add more rows that contain the drop downs, which means I'll have to keep track of how many there are on the page.

Do you think there will be any performance/memory issues of having that many instances of STComboBox? (I'm a intermediate-beginner with JS, so forgive me if that's a dumb question).
Byanonymous Anonymous 0 User 0
Oh, that's not a dumb question. I don't think there'd be memory or performance issues as long as the drop downs don't contain too many options. How many options are you thinking? Hundreds/thousands? Will each drop-down contain the same elements?

-Jason
Byanonymous Anonymous 0 User 0
Jason, thanks again for your reply.

Actually, the drop downs wouldn't be too large.  Maybe 15 to 20 items max.  There will be, I would say, 5-8 different types (sets of options) duplicated 30 or so times.  Just so you have some context, the web app displays rows of information, with some of the information editable by dropdown menus.  The user will be able to add rows as they need and add options to the dropdowns as they need.

Sounds like STComboBox will be a good fit.  I appreciate the work you put into it and answering my questions.
Byanonymous Anonymous 0 User 0
Yeah, I'm happy to help! Thanks for the good feedback, and for being patient with this commenting system (I'm still working on it, it's showing my replies as anonymous, and not ordering the replies correctly...).

I'm guessing you should be fine on performance, since you're anticipating hundreds (30 combo boxes*15=450) as opposed to thousands of items. The combo box example has 3k items in it, and it performs OK (it's a bit slower on mobile, but still usable I think).

-Jason
Byanonymous Anonymous 0 User 0
Hi,
I’m new to Java – how can i retrieve selected value from combo and pass it back to PHP server? Could you please show simple example?
Byanonymous Anonymous 0 User 0
how can we clear the combobox?
Byjasonj Anonymous 0 User 0
Sorry for the delay. I've updated the documentation above to show how to clear the combobox.
Byanonymous Anonymous 0 User 0
I really like this little library, and so far am having success making it do what I need. One question I have is the ability to initialize the displayed combobox to a value that isn't in the list? After the call to .populateList(), I do a:
combo.getInput().val('something not in list');
and that shows up initially when the page is shown. However, as soon as I click on the down-arrow, it clears that initial value from the textbox portion. Is there a different way I should be doing this? I just tried doing something similar, without the initial setting of the value, just typing in an unlisted bit of text into the box, and while it preserves that value on leaving the control, if I click/tab back to it, the custom value is cleared. Thanks for your help!
Byjasonj Anonymous 0 User 0
If you want to add a value to the combo box (either via code, or from the user), this is what I would do:
//add a value to the combo box, sort the new list, and re-render it
STComboBox.prototype.addValue = function(val) {
    //get all of the text values currently in the combo box
    var values = [];
    for(var i=0; i < this.data.length; i++) {
        values.push(this.data[i].text);
    }

    //if the value entered is not in the list, then add it and sort the list
    if(values.indexOf(val) == -1) {
        values.push(val);
        values = values.sort();
    }

    //repopulate the list
    var data = [];
    for(i=0; i < values.length; i++) {
        data.push({id: i, text: values[i]});
    }
    this.populateList(data);
};

//when the user types something new in the combobox and then focuses away from it,
//the value will be added to the combo box
STComboBox.prototype.onBlur = function(evt, val) {
    this.addValue(val);
};
Does this do what you want? It basically adds a value to the combo box so it works as if the item existed initially. It assumes that you want your items sorted, and that you're not using custom ID values that correspond to each item.
Byanonymous Anonymous 0 User 0
That would work if I wanted the newly entered "custom" value to be in the list, but in my case, I don't want the list modified -- just allow the user to enter AND KEEP a custom value. I took at look at the code, and found the following line in the .filterAndResetSelected() method:
this.$('ddi').val('');
I commented this line out, and it stopped clearing my custom value when tabbing/clicking back into the textbox. Can you tell me if this change will cause any additional issues? Should it be an optional argument passed into the .Init() method? Thanks for your quick reply!
Byjasonj Anonymous 0 User 0
I just tested the change locally, and I don't think it would cause any issues. I agree that it would be a good option for the Init() method. The only difference I can see in functionality is that, if a user selects a value in the combo box, and then wants to change to another item via typing and filtering, they first have to delete the existing text.
Byanonymous Anonymous 0 User 0
I need multiple combo boxes in a form. How do I do that with your combo box?

Leave a Comment

I agree to the Terms of Service
Design © 2015, Downranked, LLC.,
Original user code contributions under MIT License