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

You could try add the attributes with the event "open":

$( ".selector" ).autocomplete({
    open: function(event, ui) {
        var jArrEl = $("a.ui-corner-all");
        jArrEl.addClass("myclass");
        jArrEl.attr("customattribute","something");
    }
});

Answer 2

You need to replace the _renderItem method (for the autocomplete in question):

$("selector").autocomplete({ ... })
   .data( "autocomplete" )._renderItem = function( ul, item ) {
        return $( "<li></li>" )
            .data( "item.autocomplete", item )
            .append( "<a class='myclass' customattribute='" + item.customattribute + "'>" + item.label + "</a>" )
            .appendTo( ul );
   };

(assuming the items in your source have a property called customattribute)

As shown in this example: http://jqueryui.com/demos/autocomplete/#custom-data

Answer 3

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 <div>sample</div>) 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

Answer 4

You can use create event for autocomplete for newer versions. Like this:

create: function () {
            $(this).data('ui-autocomplete')._renderItem = function (ul, item) {
                var path = 'basepath' + item.value;
                return $('<li class="divSelection">')
                    .append('<div>')
                    .append('<img class="zoom" src="' + path + '" />')
                    .append('<span>')
                    .append(item.label)
                    .append('</span>')
                    .append('</div>')
                    .append('</li>')
                    .appendTo(ul); // customize your HTML
            };
        }

For full code review, I am attaching the way I bound autocomplete to my textbox.

$('.myTextBox').autocomplete({
        source: function (request, response) {

            // your call to the server
        },
        select: function (event, ui) {
            // when item is selected
            $(this).val(ui.item.label);
        },
        create: function () {
            $(this).data('ui-autocomplete')._renderItem = function (ul, item) {
                var path = 'basepath' + item.value;

                 return $('<li class="divSelection">')
                    .append('<div>')
                    .append('<img class="zoom" src="' + path + '" />')
                    .append('<span>')
                    .append(item.label)
                    .append('</span>')
                    .append('</div>')
                    .append('</li>')
                    .appendTo(ul); // customize your HTML
            };
        }
});