How to make a combobox with jQuery

So jQuery came out with a new version 1.4.2 recently and jQuery UI is trying catch up with its 1.8rc3 since 1.7.2 is not compatible with the new jQuery library itself. Since jQuery UI starts incorporating its own theme builder tool, I’ve been using it and it seems to be very nice and elegant itself.

jQueryUI has its own autocomplete feature and button so I just wanna combine them together to make a combobox, which acts as both a select box and an autocomplete field.

So the HTML is like this:

<input id="example-text-field" type="text" /><button></button>

Well you can dynamically adding the button and even the text field using jQuery manipulation method

We start with configuring the autocomplete text field first.

var $input = $('#example-text-field');
$input.autocomplete({
   source: 'ExampleAutocompleteServerHandler.do', //you obviously need the source, it can be a JavaScript array or string or some handler from the server
   minLength: 0, //important! You need to set minLength to 0 for the button to work
   delay: 0 //make it a bit faster since there's no delay
})
.css('float', 'left');

So the text field is done, now let’s move on to the button next to it:

var $btn = $input.siblings('button:first');
$btn.button({
   icons: {
      primary: "ui-icon-triangle-1-s" //this puts the down arrow into the button
   },
   text: false //no text inside the button, just the arrow
})
.removeClass("ui-corner-all")  //disable rounded corner, it's optional
.addClass("ui-button-icon")   //put in styling as a button icon since the default button is pretty big
.css({
   height: "17px",    //make it as high as the text field
   width: "18px",    //this is optional, you can make it as wide as you want
   float: 'left'    //float it to the left so that it's right next to the text field
})
.unbind('click')   //it's optional but I like to clear all events associated to it before binding new click event
.click(function() {   //set up click binding event
   if ($input.autocomplete("widget").is(":visible")) {   //close the displaying result if it's visible already
      $input.autocomplete("close");
      return false;
   }
   $input.autocomplete("search", ""); //pass empty string as search query, this is why you need to set minLength = 0 so that it still searches, but displays all possible choices
   $input.focus();  //focus on the text field
   return false;  //disable form submit
});

$input.parents(':first').find('.ui-autocomplete') //configure result display so that it won't shift down the content
.css('width', '150px')
.css('height', '100px')
.css('overflow', 'auto');

There you go, combobox is done, you can pack it into a plugin with jQuery or inside your main JavaScript file, up to you.

Advertisements
Tagged , , , , , ,

5 thoughts on “How to make a combobox with jQuery

  1. […] people start switching to a kinda combobox (if you wanna make 1 in jQuery, see this), which is a hybrid of text input and options, or autocomplete (like Google search). The whole […]

  2. Sanyam says:

    Do you have a working demo-page for this blog. I want to implement combobox using Jquery.
    Thanks

  3. Pragati says:

    Hello,

    I am using the js file present at http://www.melrosesolutions.com/scripts/combobox.js along with other jquery and css files.

    In the picklist I have then called the class “combobox” but still nothing is working. 😦

    Alpha
    Beta
    Gamma
    Delta

    Please help. I need this part to work urgently.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: