Autocomplete with categories, item custom style

Question

I pretty new to JqueryUI and JQuery but managed to figure out how to get the autocomplete function with catergories.

Now i want to build my solution further, and i don't know if it is possible.

Basiclly i want the "dropdown"-ITEM(one item in the box, not category) on the textbox to have two different styles.

i want this:

<li class="ui-menu-item" role="presentation">
    <a id="ui-id-28" class="ui-corner-all" tabindex="-1">I want it all</a>
    <a class="mycssclass"> by Queen</a>
</li>

notice the extra anchor(last in the

element) with a cssclass that i want to use(to change the font, color and such)

Should i do some operation (append) on the widget-catcomplete function?

This is my Jquery:

$.widget("custom.catcomplete", $.ui.autocomplete, {
    _renderMenu: function (ul, items) {
        var that = this,
          currentCategory = "";
        $.each(items, function (index, item) {
            if (item.category != currentCategory) {
                ul.append("<li class='ui-autocomplete-category'>" + item.category + "</li>");
                currentCategory = item.category;
            }
            that._renderItemData(ul, item);          
        });
    }
});

$(function () {
    $("#ListenToInput").catcomplete({
        delay:0,
        source: function (request, response) {
            $.get("http://ws.spotify.com/search/1/track.json", { // Call Spotify WebService (JSON)
                //currently selected in input
                q: request.term //query for search
            }, function (data) {                
                response($.map(data.tracks.slice(0, 5), function (item) {
                    return { label: item.name, by: item.artists[0].name, category: "Track" }; 
                    // returns five items of [{label: "Name"}{by: "Artist"}{category: "Track"}]             
                }));
            });
        }
    });
});

I suspect i should do something with this line??:

that._renderItemData(ul, item);

UPDATE: I did a override on the _renderItem method, but somehow this messes up the "menuclick" event. The Value of item is undefined, dont know the solution to that nut.

$.ui.autocomplete.prototype._renderItem = function (ul, item) {
        item.value = item.label +" - " + item.by;
        return $("<li>")
            .append($("<a>").text(item.label)
            .append($("<a class='customclass'>").text(item.by)))
            .appendTo(ul);
    };

Thanks in regards.

jsfiddle.net/3qgN3/2 - Heres a JSFiddle BUT! it solved itselfe, i dont know how, maybe it was becuase the functions was inside a documentready function ? — J.Olsson

J.Olsson J.Olsson · Accepted Answer · 2013-09-03T16:59:30

I solved it by myself.

This is the solution: http://jsfiddle.net/3qgN3/2/

I THINK it was because the functions was inside a document ready function.

$(document).ready(function () {
     //Functions in OP was moved outside
});

Autocomplete with categories, item custom style

1 Answers