Question

$("#shout_field").live('keydown', function (event) {
        if (event.keyCode === $.ui.keyCode.TAB && $(this).data("autocomplete").menu.active) {
            event.preventDefault();
        }
    }).autocomplete({
        minLength: 0,
        source: function (request, response) {
            var term = request.term,
                results = [];
            if (term.indexOf("@") >= 0) {
                term = extractLast(request.term);
                if (term.length >= 2) {
                    $.ajax({
                        type: "POST",
                        url: "/data/people.asp",
                        dataType: "json",
                        data: {
                            term: term
                        },
                        error: function (xhr, textStatus, errorThrown) {
                            alert('Error: ' + xhr.responseText);
                        },
                        success: function (data) {
                            response($.map(data, function (c) {
                                return {
                                    id: c.id,
                                    label: '<b>' + c.img + '</b>' + c.label,
                                    value: c.value
                                }
                            }));
                        }
                    });
                } else {
                    results = ['Type someones name to tag them in the status...'];
                }
            }
            response(results);
        },
        focus: function () {
            // prevent value inserted on focus
            return false;
        },
        select: function (event, ui) {
            var terms = split(this.value);

            // remove the current input
            terms.pop();
            // add the selected item
            terms.push(ui.item.value);
            // add placeholder to get the comma-and-space at the end
            terms.push("");
            this.value = terms.join("");

            $('body').data('tagged', this.value)

            var tagged_users = $("#tagged_users").val();
            $("#tagged_users").val(tagged_users + ui.item.id + ',')

            return false;
        }
    });

I can do it normally but with the autocomplete coming from a remote call I am getting confused… 🙁

The bit I am interested in is the part where c.img is in <b> tags, it isn’t rendering as HTML…

Answer 1

You should override the private method _renderItem() of the plugin.
This function is called for each item to be displayed.

First argument represents the <ul> element the plugin creates to display the menu. The second argument is the current data item.

By default the plugin generates a <ul> so in your overriden _renderItem() you should keep making a <li> but you can have anything in it.

For your case, I would return a silghtly different array data object, it’s just to store data so it’s better to have everything separated:

return {
    id: c.id,
    label: c.label,
    imgUrl: c.img,
    value: c.value
}

To implement the custom rendering method, you simply re-define a new function for the plugin instance. How does this work ?

• When you call $('#myelement').autocomplete() the plugin instantiates and

  1. Generates the necessary markup, etc
  2. Adds the plugin instance to the element #myelement as jquery data under the name “autocomplete”

• The plugin instance is then accessible by doing $('#myelement').data('autocomplete');

• You can then define a new function for the method _renderItem

This gives:

$("#shout_field").autocomplete({
    ...
})
.data('autocomplete')  // get the instance of the plugin
._renderItem = function( ul, item ) {  // change the _renderItem method

    // "item" is the current data item, so { id, label, imgUrl, value }


    return $( "<li></li>" ) // generate a <li> element

            // store the data item (used by the plugin)
            .data( "item.autocomplete", item )

            // create the display you want into the <li>
            .append( '<img src="' + item.imgUrl + '" />' + '<a>' + item.label + '<br>' + item.desc + '</a>' )

            // add the <li> to the list
            .appendTo( ul );

};