Taming jQuery UI’s Autocomplete Combobox/Drop Down List

So the story goes like this. Hey, we’re using jQuery UI, straight up. No data binding framework, or any fancy tricks like that. We need a drop down combobox thingy to list these items, that the user can select, and obviously when you edit an existing item, the right one needs to be prautomatically selected. OK, no problem! You say. This is a no-brainer. Should take 10 mins to get this done. Hehehe… well, well, well, do I have a surprise for you. It gets a little bit more complicated when you’re using jQuery UI…

And there I was staring at the jQuery UI’s autocomplete combobox example. Trying to figure this all out. So after reading up about it quite a bit, I still struggled to get a coherent idea of how it actually worked.

You Did What To My Select Tag?

After inspecting the HTML for a while, I had an “EUREKA!” moment, when I realized that when you apply jQuery UI to your web page, it completely changes the behavior of the standard HTML <select> element. Say you have the following HTML, before jQuery UI gets a hold of it:

<select id=”slctItems” 
        style=”display: none;”>
 <option value=”1" selected=”selected”>Item A</option>
 <option value=”2">Item B</option>
 <option value=”3">Item C</option>
 <option value=”4">Item D</option>
</select>

Afterwards, this is what jQuery UI turns it into:

<select id=”slctItems” 
        class=”required capture-form-medium filterselect”
        style=”display: none;”>
 <option value=”1" selected=”selected”>Item A</option>
 <option value=”2">Item B</option>
 <option value=”3">Item C</option>
 <option value=”4">Item D</option>
</select>
<span class="slctItems ui-combobox" 
      style="position: relative; display: inline-block;">
  <input class="ui-state-default 
               ui-combobox-input 
               filter-select 
               ui-autocomplete-input 
               ui-widget 
               ui-widget-content 
               ui-corner-left" 
         autocomplete="off" 
         role="textbox" 
         aria-autocomplete="list" 
         aria-haspopup="true" 
         style="margin: 0px; padding: 0.3em;">
            <a tabindex="-1" 
               title="Show All Items" 
               class="ui-button 
                     ui-widget 
                     ui-state-default 
                     ui-button-icon-only 
                     ui-corner-right 
                     ui-combobox-toggle" 
               role="button" 
               aria-disabled="false" 
               style="position: absolute; 
                     top: 0px; 
                     bottom: 0px; 
                     margin-left: -1px; 
                     padding: 0px;">
                <span 
                  class="ui-button-icon-primary 
                        ui-icon 
                        ui-icon-triangle-1-s">
                </span>
                <span class="ui-button-text"></span>
            </a>
        </span>

The important thing to note, is that jQuery hides your original select element, and in its place shows an interesting structure, consisting of spans, anchors and input elements. So you go ahead and populate select options using something like the following:

$("#slctItems").empty();
$.each([obj1, obj2, obj3], function (key, value) { 
  $("#slctItems")
    .append($("<option></option>")
    .attr("value", value.someId)
    .text(value.someDescription)); 
});

Next, you try to programmatically select the right option, based on a previously saved value. For example, if you saved a customer’s address, you’d want the correct country to be selected in a list of countries, otherwise just default to the first country in the list:

if (someIdToSelect) { 
  $("#slctItems option[value=" + someIdToSelect + "]")
    .attr("selected", "selected");
} else { 
  $("#slctItems option:first").attr("selected", "selected"); 
}

And this is exactly the point where … well … nothing happens…

The problem is that jQuery UI requires a mechanism to keep its combobox in sync with the original select element. The trick is to trigger a change on the select object, that will notify jQuery to sync it’s combobox:

$("#slctItems").trigger("change");

Looking back, it all seems so simple now. But as they say, with the benefit of hindsight… If you don’t understand these few points, you can spend a disproportionate amount of time doing something as programmatically populating and selecting a drop down list.