Autocomplete autocomplete

JQuery is the most widely used javascript framework on the web. Its companion user interface library, jQueryUI, also has a lot to offer. In a recent release jQueryUI began offering a baked-in autocomplete function – not a third-party component, but part of the jQueryUI core itself. Using jQueryUI you can now add auto-complete functionality to a standard text input in just a couple of lines of client-side code.

Here’s the simplest possible example of jQueryUI’s autocomplete function. You specify the id of the text input to which you want to apply autocomplete, specify a source for the data and some code (not included) to invoke when the user selects one of the proffered options.

  $("#textinputid").autocomplete({

    source: "http://www.server.com/autocomplete.php",

    minLength: 2,

    select: function(event, ui){

      // Do something when an item in the autocomplete menu is selected

    }

  });

JQueryUI does the rest: it’s very simple.

There’s a problem though. The jQueryUI team provides three options for populating the autocomplete menu via the source attribute. The one I most commonly use is illustrated above: a string containing a URL. JQueryUI will append to this a parameter called atom that contains the value of the text input. This works fine … unless you also want to include data from, say, checkboxes on the page.

  $("#textinputid").autocomplete({

    source: "http://www.server.com/autocomplete.php?active=" + $('#checkboxid').prop(': checked'),

    minLength: 2,

    select: function(event, ui){

      // Do something when an item in the autocomplete menu is selected

    }

  });

The above code does work, but the checkbox value never changes: it’s evaluated when the autocomplete function is loaded. If it’s checked then, it’s always checked. If it’s not, it’s not. Nothing the user does will change it. While the code is simple and easy to follow, it’s not terribly useful.

JQueryUI does provide other ways of populating the source attribute, but they’re a little more complicated than a simple concatenated string: you have to do a bit more of the heavy lifting yourself. Thankfully there’s an easy workaround.

JQueryUI’s autocomplete provides an optional search attribute which is invoked just before autocomplete attempts to retrieve matches for the atom entered in the text input. Usefully, this isn’t evaluated when the autocomplete function is loaded, and it can be used to set the source parameter.

  $("#textinputid").autocomplete({

    source: "",

    minLength: 2,

    select: function(event, ui){

      // Do something when an item in the autocomplete menu is selected

    },

    search: function(event, ui){

      $("#textinputid").autocomplete({

        source: "http://www.server.com/autocomplete.php?active=" + 

          $('#checkboxid').prop(': checked')

      });    

    },

  });

While this approach is admittedly a little bit of a kludge, it’s not enough to offend my sensibilities. It works, it works robustly, and the code remains reasonably simple and easy to follow.