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

<ul class="ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all">
  <li class="ui-menu-item">
    <a class="ui-corner-all">item 1</a>
  </li>
  <li class="ui-menu-item">
    <a class="ui-corner-all">item 2</a>
  </li>
  <li class="ui-menu-item">
    <a class="ui-corner-all">item 3</a>
  </li>
</ul>

I need to make the links inside to look something like this:

<a class="myclass" customattribute="something"> The item </a>

Please don't tell me the only solution it to edit the plugin because i don't want the same format for all autocompletes on the site.

Quag

Answer 1

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

Vomiturition

oh man. I missed that in the examples there. Thanks a thousand! It works perfectly. – Quag

@Andrew Whitaker +1 - you saved me a whole lot of trouble. I checked the documentation on api.jqueryui.com/autocomplete/#entry-examples, but it didn't say anything about _renderItem. – Dirndl

Answer 2

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

Minos

This solution works like a charm. just download the file named "jquery.ui.autocomplete.html.js" inside "src/autocomplete". Add the script to your html file and follow instructions above. Took me 1 minute to make it work. – Florid

Perfect! Thank you! – Founder

Answer 3

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");
    }
});

Haul

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
            };
        }
});

Zoubek

Please note that .append() function chain does not produce desired DOM. See #41388238 – Farci