jQuery-UI – Rich Autocomplete component

A problem with the out-of-box jQuery-ui autocomplete component is that:

  • Only text is shown in the dropdown
  • That same text populates the field upon list selection.

Thankfully, this does not have to be the case. Images and other markup can easily be rendered in the suggestion list. Consequently, the text that populates the autocomplete field upon selection is fully customizable.

image

 

Allowing markup (html) in the suggestion list

Assuming this is how the autocomplete field is initiated:

then customization of the list contents can be achieved as so:

Note: – .data( “ui-autocomplete” ).  The jQuery-ui demo pages still uses .data( “autocomplete” ). To use the latter with newer versions of jQuery-ui will not work.

Note: – The parameter ‘ul’ is a <UL></UL> html unordered-list.

Note: – The <a> is necesary in order for the click event to work on the list.

Grabbing the JSON from a remote source

where ,source is the ‘source’ option parameter applied in the creation of the autocomplete component. http://jqueryui.com/autocomplete/#custom-data

 

The JSON is returned to the success method. Calling response(data) makes the data available to the _renderItem described above. Do not try to process the data object in this success function.

Custom Styling (of the suggest list)

In the _renderItem function above, the class ‘customSuggestList’ was applied to the <UL>. That can now be used to style the suggested list as so:

Style as required….

 

Comments always welcome……