jQueryUI Autocomplete doesn't really autocomplete

I'm using the jQueryUI autocomplete functionality with custom data and display, but have only succeeded in getting it to work partially. The actual save functionality is fine, but I can't seem to get the UX right.

If I click on an empty box, the autocomplete dropdown appears with every option populated. If, however, I start typing, the dropdown isn't filtered, it just goes away entirely. In this case, the list of options is pretty small and we're using this technique to reduce the potential for typos creating new records. For example, one dropdown includes 2 options: Potomac Electric Power Co. and Vir开发者_如何学运维ginia Electric & Power Co. Hardly a need for massive filtering, but I'd expect that if someone started typing "Poto" or even "poto", the list would be filtered from 2 to 1 option.

That doesn't happen for me. I have to be missing something since their example works exactly like I'd expect, but maybe I'm just past the point of seeing it.

      $provider_name.autocomplete({
        source: data.Utilities,
        minLength: 0,
        focus: function( event, ui ) {
          $provider_name.val( ui.item.Utility.name );
          return false;
        },
        select: function( event, ui ) {
          $provider_name.val( ui.item.Utility.name );
          $provider_id.val( ui.item.Utility.id );
          return false;
        }
      }).data( 'autocomplete' )._renderItem = function( ul, item ) {
        return $( "<li></li>" )
          .data( "item.autocomplete", item )
          .append( '<a>' + item.Utility.name + '</a>' )
          .appendTo( ul );
      };

Any input would be much appreciated. Thank you.

---

The issue is that the autocomplete widget expects your data to be formatted the following way:

[
    { label: 'Potomac Electric Power Co.', value: '1234' },
    { label: 'Virginia Electric & Power Co.', value: '1234' }
]

(If your name/value are identical you only need to supply the value property)

The difference between the way you're doing it and the way jQueryUI's demo is doing it is that they are not using an intermediate object like yours is. You've told the widget how to render each item, but the widget doesn't know how to find each candidate when you search.

I would fix this by massaging your data using the $.map(...) function. This will allow you to transform your data into a more autocomplete-friendly array. Something like:

var friendly = $.map(data.Utilities, function(el) {
    return { label: el.name, value: el.id };
});

and then alter your select event handler:

select: function( event, ui ) {
    $provider_name.val( ui.item.label );
    $provider_id.val( ui.item.value );
    return false;
}

Note that you can provide more information in each object of the source array. You can even access that data in the event handlers. Just make sure to supply the label and value properties.