Home > jquery > Autocomplete combobox using JQuery UI

Autocomplete combobox using JQuery UI

Disclaimer, Sept 2013: The following worked for me with an older JQuery version, but not with 1.9 or later. The code is provided as is and might be useful for some people, but due to time constraints I cannot assist with problems you might run into.

The example at http://jqueryui.com/demos/autocomplete/combobox.html illustrates how you can use JQuery UI to turn any HTML <select> element into an auto-complete combobox.

Auto-complete means in this context that the select options are narrowed down by what the user has typed in so far.

The example has a few bugs and shortcomings, some of which have been fixed here. I build on this work and further fixed it up to support dynamic updates of the options list through event-triggered AJAX calls. You can find the source code of the resulting JQuery UI auto-complete combobox widget at the end of this post.

Expose it to your webapp as includes/js/combobox.js and include it from your HTML or JSP page like this (adjust the path according to your JQuery UI installation):

<script type="text/javascript" src="includes/js/jquery-ui-1.8.4/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="includes/js/jquery-ui-1.8.4/js/jquery-ui-1.8.4.custom.min.js"></script>
<script type="text/javascript" src="includes/js/combobox.js"></script>

And let’s say your <select> component looks like this:

<select id="mySelect">
  <option value="1">one</option>
  <option value="2">two</option>
  <option value="3">three</option>
  <!-- etc. -->
</select>

Then make it an auto-complete combobox widget like this:

$(document).ready(function() {
   $("#mySelect").combobox();
}

You can update the options dynamically using JQuery’s load() function, typically triggered by an event. The interesting part is that I implemented the internal _create() and _init() functions of the widget so that reinitialization through additional calls to combobox() are supported:

$("#mySelect").load(
    "dataRequest.do", // this has to be your own AJAX handler that generates the new options as HTML
    function() { // this callback function is invoked after the AJAX call has returned
        // then refresh the combobox widget (to use the updated options)
        $("#mySelect").combobox();
    }
);
/*
 Based on code from
 http://www.melrosesolutions.com/blog/index.cfm/2010/7/16/Turn-SELECTs-into-Comboboxes-with-jQuery-UI-Autocomplete
 */

(function($) {

    $.widget("ui.combobox", {

        _create: function() {
            var select = this.element;

            if (select.is(":disabled") 
                    || select.hasClass("inputOverlayCreated")) {
                return;
            }

            select.hide();

            // set up input text element
            var input = $("<input type='text'>");
            input.insertAfter(select);

            // remember that combobox is creates (to avoid odd duplicates)
            select.addClass("inputOverlayCreated");

            // the class ui-combobox-content is required for proper
            // highlighting of data changes
            input.addClass("ui-combobox-content ui-widget ui-corner-left");

            //clear text when user clicks in text input
            input.click(function() {
                $(this).val("");
            });

            input.attr("menustatus", "closed");

            // over-ride form submit, so it can't submit
            // if the menu is open
            var form = $(input).parents('form:first');
            $(form).submit(function(e) {
                return (input.attr('menustatus') == 'closed');
            });

            // set up button for fake 'select'
            var btn = $("<button>&nbsp;</button>");
            btn.attr("tabIndex", -1);
            btn.attr("title", "Show All Items");
            btn.insertAfter(input);
            btn.button({
                icons: {
                    primary: "ui-icon-triangle-1-s"
                },
                text: false
            });
            btn.removeClass("ui-corner-all");
            btn.addClass("ui-corner-right ui-button-icon");
            btn.click(function() {
                //event.preventDefault();
                // close if already visible
                if (input.autocomplete("widget").is(":visible")) {
                    input.autocomplete("close");
                    return false; // return false, so form isn't automatically submitted
                }
                // pass empty string as value to search for, displaying all results
                input.autocomplete("search", "");
                input.focus();
                return false; // return false, so form isn't automatically submitted
            });

            // add some styles
            btn.css("margin-left", "-1px");
            btn.css("padding", 0);
            $('span.ui-button-text', btn).css("padding", 0);

            input.css("margin", 0);
            input.css("padding", "0 0.4em 0 0.4em");
            input.css("width", select.outerWidth() - btn.outerWidth(true) - 10);// match the width
        },

        _init : function() {
            var select = this.element;

            if (select.is(":disabled")) {
                // we don't apply any fancy combobox behaviour at all
                // if the underlying drop-down list is disabled
                return;
            }

            var opts = new Array();
            $('option', select).each(function(index) {
                var opt = new Object();
                opt.val = $(this).val();
                opt.label = $(this).text();
                opts[opts.length] = opt;
            });

            var input = select.next();

            // initialise text with what's currently selected
            input.val($(':selected', select).text());

            input.autocomplete({
                source: opts,
                delay: 0,
                change: function(event, ui) {
                    if (!ui.item) {
                        // user didn't select an option, but what they typed may still match
                        var enteredString = $(this).val();
                        var stringMatch = false;
                        for (var i = 0; i < opts.length; i++) {
                            if (opts[i].label.toLowerCase() == enteredString.toLowerCase()) {
                                select.val(opts[i].val);// update (hidden) select
                                $(this).val(opts[i].label);// corrects any incorrect case
                                select.trigger("change");
                                stringMatch = true;
                                break;
                            }
                        }
                        if (!stringMatch) {
                            // remove invalid value, as it didn't match anything
                            $(this).val($(':selected', select).text());
                        }
                        return true;
                    }
                },
                select: function(event, ui) {
                    select.val(ui.item.val);// update (hidden) select
                    select.trigger("change");
                    return true;
                },
                // stop parent form from being while menu is open
                open: function(event, ui) {
                    input.attr("menustatus", "open");
                },
                close: function(event, ui) {
                    input.attr("menustatus", "closed");
                },
                minLength: 0
            });
        }
    });

})(jQuery);
Advertisements
Categories: jquery
  1. raymond
    September 18, 2012 at 18:43

    You need post the complete source file in order to download

    • September 18, 2012 at 21:39

      I am not sure what you mean, Raymond. I included the complete code for the combobox component. What part do you think is missing?

  2. office
    October 25, 2012 at 07:34

    That’s really nice. But usually the Ajax call doesn’t build an HTML select tag, instead return a JSON array. Can you give an example of integrating with json? Thx.

  3. Sondre
    November 28, 2012 at 18:25

    Hi! I just tried your code, thank you very much! But after a few hours of testing, I cannot get the down-arrow to show up. I use jQuery 1.8.3 and jQueryUI 1.9.2. Could you test it as well to see if it is a bug or not

    • December 17, 2012 at 10:54

      Which browser(s) are you using? I currently don’t have time to analyze and solve your problem. But I know that the code works for my team. We tested this in IE9 and Firefox.

  4. March 10, 2013 at 23:51

    I have been able to load a dynamic combobox from data living in a MySQL database but my change event is not firing. I have read about binding the Function with .live() or .on() but don’t know how to do this Any help is appreciated!

  5. September 11, 2013 at 20:05

    One of the instances of combobox will not size to contents (too small) will not accept style override, any suggestions?

    • September 11, 2013 at 21:19

      Have you done some debugging in Firebug?

  6. Winston
    September 25, 2013 at 06:29
  1. No trackbacks yet.

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: