Jquery autocomplete - custom html for result listing

Question

I am referring to this plugin: http://jqueryui.com/demos/autocomplete/

So the original structure for the results is

Answer 1

This is also documented in jquery-ui autocomplete documentation at: Jquery-autocomplete.

The trick is:

1. Use this jquery extension: github Code

2. Then in autocomplete option pass

   html:true
   
   ...autocomplete({
   ...
   html:true
   ...
   }
   

   );

3. Now you can pass html(like

   sample
   ) in "label" field of JSON output for autocomplete.

If you don't know how to add the plugin to JQuery then:

1. Save the plugin(Scott González' html extension) in a js file or download the js file.
2. You have already added the jquery-ui autocomplete script in your html page(or the jquery-ui js file). Add this plugin script after that autocomplete javascript file.

Post date: 28th July, 2013