Transforming data returned while using jQuery's Autocomplete function

Question

I'm trying to use the Autocomplete plugin to produce a search box similar to the one at IMDB , I want it to:

• Show more than just text in the options.
• To act like a link when an option is selected (as each option will be a unique record).
• That, if the user chooses, they press the button and a search is performed on their input.

The docs say that there are 3 types of datasource it will work with:

A data source can be:

an Array with local data
a String, specifying a URL
a Callback

I can get the autocomplete to work with the 2nd option, but then there isn't the ability to transform the data returned, it just takes the JSON and puts it straight in the dropdown. This means the source url can only return data in the format {label: "blah", value: "blurg"} .

If I could inject a transformation function, then I could have the url return whatever JSON I like, the function would change the data into the format the autocomplete expects but also formatted as I wish, and all without changing the response served by the url (I'm not going to return HTML from there, only JSON).

eg The url could return this:

{ label:"Grosse Point Blank", id: 3, img:"/imgs/gpb.png",...}

and a transform function could mung it into something like this:

{ label:"<a href='/films/3/grosse-point-blank'><img src='/imgs/gpb.png' />Grosse Point Blank</a>", value="grosse-point-blank"}

I've tried using option 3, a callback, with a getJSON call, but I can't get it to work. The nearest code I've found to what I may need is here, but it has options that aren't listed in the current docs for Autocomplete and I don't understand how to use the response object.

If anyone knows of an example of using the callback method with an AJAX request, or how I can inject a function that transforms the code, I would be very grateful.

Any insight or help is much appreciated.

Answer 1

You can use the _renderItem() private method of autocomplete to format the return data. It looks like this:

$("#element").autocomplete({...}).data( "autocomplete" )._renderItem = function( ul, item ) {
    //...
};

You can see the method definition here https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.autocomplete.js#L520

An example of code that I have used:

$("#element").autocomplete({...})
.data("autocomplete")._renderItem = function( ul, item ) {
    return $( "<li></li>" ) // create the list item
        .data( "item.autocomplete", item ) // save the data to the DOM
        .append( "<a>"+ item.label + "</a>" ) // add the HTML
        .appendTo( ul ); // append to the UL
};

Answer 2

Here's a brief structure when using callback method.

  source: function( request, response ) {
    $.ajax({
      ...
      success: function( data ) {
        // do transformation of data here
        response(data);          
      }
    });
  }

Quoted from your link, http://api.jqueryui.com/autocomplete/#option-source

The third variation, the callback, provides the most flexibility, and can be used to connect any data source to Autocomplete. The callback gets two arguments:

A request object, with a single property called "term", which refers to the value currently in the text input. For example, when the user entered "new yo" in a city field, the Autocomplete term will equal "new yo".

A response callback, which expects a single argument to contain the data to suggest to the user. This data should be filtered based on the provided term, and can be in any of the formats described above for simple local data (String-Array or Object-Array with label/value/both properties). It's important when providing a custom source callback to handle errors during the request. You must always call the response callback even if you encounter an error. This ensures that the widget always has the correct state.