The other day I needed a text input control that allowed free-form text input in combination with a select control for choosing a value from a predefined list — a combo box. I spent quite a while looking for a decent combo box plugin for jQuery. I did find this one (jQuery Editable Combobox), but the behavior and appearance seemed a bit odd to me. So here’s my combo box jquery plugin.
The “dropdown” button style can be customized with css. Here’s a quick example.
The Markup:
<input id="combobox1" type="text" name="fruit" />And the Javascript:
jQuery(function () { jQuery('#combobox1').combobox([ 'Apples', 'Oranges', 'Bananas' ]); });
I intend to add support for more flexible custom styling. The plugin is listed on jquery.com
Just used it in a new WordPress plugin I’m working on.
Make sure you have the latest version 0.4. Supports auto-complete now.
Dell,
When I attempted to run this against a View generated in MVC the following error occured:
Line:66
Char:17
Error: console is not defined
what is the console referencing ?
Thanks
Dell,
Realised problem caused due to lack of Firebug logging mechanism against IE…..all fixed now .
Thanks
Thanks Darren. Spotted that myself a little while ago. There is a new release (0.4.1) on the download page.
How about adding scrollbars to the dropdown list, so that when you have a big list of values it does not scroll off of the page? Perhaps having an option to limit the drop down list to values and then forcing scrolling?
Good suggestion Art. My initial use-cases only had a handful of values, but I just encountered the problem you described. I’ll address this with the next version.
Glad people are finding this useful enough to submit suggestions!
I was able to change the .combobox_selector ul syle and set a height, which worked well. It would be nice though if you could pass in these values to the constructor, or as options.
One other thing: if your selected drop down list element has a character such as an ampersand, then it will be HTML encoded when you select the item out of the drop down list and you end up with ie: ‘cats & dogs’ in the text input; I was able to correct this by changing
setValue : function (value) {
this.textInputElement.val(value);
}
to
setValue : function (value) {
return $(”).html(this.textInputElement.val(value)).text();
}
there is probably a better way to do it; but creating an in-memory div and grabbing the text seemed to work.
Great work — this plugin saved me a bunch of time and works well!
Fantastic object, exactly what I have been looking for.
I am having a problem with it in IE however; if I change the example page to have the 2 controls 1 above the other and then deliver the page from an IIS website, the first combo_selector is displayed behind the second one.
If I double-click the html page in windows explorer I get the option to all blocked content and it displays correctly but not when displayed from a website.
Seems okay in Firefox and Chrome….any thoughts?
Also, I agree with Art, scrollbars would be a welcome improvement. Looking forward to the next release.
Is there any way you could enhance it to have a value as well as the display text? On a regular dropdown you can have the selected value as a code whilst what is shown in the drop down could be full text.
THanks
Ok I think I have found the answer to my own question…
Looks like an old IE bug is back in IE9, works fine in Compatibility mode and with some tweaking of the Doctype.
Please ignore my last comment about finding the answer, it has gone back to it’s behaviour of displying the “dropdown” behind the compb box below it
Thanks for the comments Nick. Will look into the IE bug when I have a chance. I’m not sure about adding a value — the emphasis here is on adding pre-defined options for a text intput. I’ll give it some thought.
It do not works with old jquery version
Thanks for giving me a head start… Your code allowed me to get my feet wet with Jquery. Terrific solid core work. I have expanded it to do/use the the following: Allow passing of a text/value double diminensional array. Storing of a selected value, Manipulating the height and width of the dropdown section of the combobox. Added scroll bars for when height,width is set. Added the ability for the onchange event (allows cancelling out). Took away storing the comboboxes as instances instead the class appends to the actual input tag (storing them in an array creates a problem if they ever get re ordered on the page from some reason, since I will be creating a custom asp.net control this is a possiblity for me). Added the ability to Get and Set the Selected Value, Redid the Get and Set of the Selected Text, sumulated overloading. The only thing left is ajaxing it when need be… But that is for later… This will help me create a simple light weight combobox for the basic uses needed. Nothing fancy…
Hi, I am finding this very useful and the simplicity of it is a big plus. One question I have is how to capture on change when the selection changes. The standard event onchange and the jquery
jQuery(‘#myid’).change(function(){
alert(“handler for onchange markers”);
});
only gets triggered when I type a change in; not on a pull down/selection change.
Thanks!
I also need ability to dynamically add values – anybody got any pointers? It looks like if i access the instances array i should be able to do this.
@craig: Yes, use the instances array. The instances are indexed by the order they were created.
jQuery.combobox.instances[0].setSelectOptions([
'Apples',
'Oranges',
'Bananas'
]);
You can see a working example in the Combobox Demo
jakelin, you are going to have to code inside the js file. When you add change on the input box it will only do the input box. So extra coding is required. Should not take you to long to figure it out… Didn’t take me long….
hi angela, you are right, i just had to override the setValue inside jquery.combobox.js to trigger a change event for the input element. Can you please give me a tip on the enabling of vertical scroll bars? thanks
jakelin, this one is more involved depending on how you want to do it. In the comboselector area there is a div being declared that is where you can control it. Also, when you try and control it will you will a border problem and you will have to deal with that in CSS. You will have to take the border off the UL and put it on the div. With mine I allowed setting of the drop down width and height with auto scrolling. So depending on whether or not those are filled in I proceed either with the original design or with my custom design. Unfortunately, I can’t pass code along because it is customized to work with .NET scenario with my customized ASP.NET user control I created.
Gald to see people are making use of this. I know there have been several requests for new features, but I’ve been swamped lately. I’ve posted the project on github if anyone wants to fork it. I’m happy to accept pull requests — once I learn how all that works. I’m a bit new to github.
Anyone have a solution to the z-index problem with the div? It is not compatible with the jquery theme buttons. It will show underneatht the button. No matter what I set the div or the ul z-index to with !Important on it. It still slides underneath with IE 8.0. Works with FF but not IE…. I am stumped….
Well, I might have to cut my losses… not sure yet… but the solution does have styling problems witht he dropdown part being displayed underneath things with IE 8… When I stack them on top of each other like 4 in a row one on each line. The visibility is wonky for both ff and ie 8. Unfortunately, I am not a CSS guru and with my limited skills I tried to fix it but can;t… That is a major design flaw with it.
Can you show how to set the max-height for combobox dropdownlist ?
I agree with angela that it gets hidden behind other dropdown boxes. Please try to fix this bug.
@jakelin,
add the ‘trigger’ line into the setValue function, as per below:
setValue : function (value) {
this.textInputElement.val(value);
this.textInputElement.trigger(‘change’);
},
Now the .change event will be triggered whenever you select a new item in the drop-down box.
for anyone interested, I just posted an update that addresses some of the issues people have mentioned:
See tag 0.5.0 on github
Changelog