A pattern I am using a lot is that I have a list of record with an id and a title. Autocompletion happens on the title and when an entry is selected I use the result handler to store the associated id in a hidden input field, which gets processed by my backend. The html looks like this:

<input type="hidden" name="brand" value="" id="realBrandValue"/>
<label for="brandCompleter" id="articleBrand">Merk
  <input type="Text" name="brandCompleter"/>
</label>

and the javascript looks like this:

    $("label#articleBrand input").each(function() {
        var brandid = $("input#realBrandValue")[0].value;

        if (brandid) {
            for (var i=0; i!=brands.length; i++) {
              if (brands[i].value==brandid) {
                   $(this).attr("value", brands[i].title);
                   break;
               }
           }
       }
    }).autocomplete(brands, {
        autoFill : true,
        mustMatch : false,
        formatMatch: function (row, i, total) { return row.title; },
        formatResult: function (row) { return row.title; },
        formatItem: function (row, i, total) { return row.title; },
    }).result(function(event, row) {
      $("input#realBrandValue").attr("value", row.value);
    });

For situations where users must be able to use unknown values this does not work since the result handler is not called for un-matched data input. What I am missing for that situation is a handler that allows me to catch that situation so I can update my hidden input field.

Looking at the code I see two ways to accomplish this:

• also trigger the result handler if selected evaluatues to

false at the beginning of selectCurrent(). This may have

backwards compatibility problems.

• add a new handler for this case and trigger that from

selectCurrent at the point where it current does a return false.