Question

I have this javascript here is make to work like a search suggestion for a music search engine. I have this problem at the first character typed it works fine but if i type more characters it show me me al the results in one line with no pics breaks and everithyng. please someone take a look and tell me what i do wrong. Here is the sample http://jsfiddle.net/coladeu/Qhj5N/24/

<script>var keyword;
    $("input#selectedInput").bind("autocompleteselect", function (event, ui) {        
alert("Sel item " + JSON.stringify(ui.item.json));
}).autocomplete({
appendTo: "#list",
source: function (request, response) {
    keyword= $('#selectedInput').val();
    //alert("success");
    $.ajax({
        url: "http://itunes.apple.com/search?term=" + keyword + "&entity=musicTrack",
        dataType: "jsonp",
        data: {
            featureClass: "P",
            style: "full",
            maxRows: 12,
            name_startsWith: request.term
        },
        success: function (data) {
            response($.map(data.results, function (item) {
                itunesJson = item;
                return {
                    label: "<li><img src='" + item.artworkUrl30 + "' alt='no photo'/>" + item.trackName + "</li>",
                }
            }));
            var elm = $("#list");
            elm.html(elm.text());
        },
    });
}
                     });​</script>

Answer 1

There are a few things going wrong here. The main issue is that you should be overriding the _renderItem function to customize display of the list as demonstrated in this demo.

This means instead of populating the label property of each item with HTML, you should do something like this:

$("input#selectedInput").bind("autocompleteselect", function(event, ui) {
    alert("Sel item " + JSON.stringify(ui.item));
}).autocomplete({
    appendTo: "#list",
    source: function(request, response) {
        $.ajax({
            url: "http://itunes.apple.com/search?term=" + request.term + "&entity=musicTrack",
            dataType: "jsonp",
            data: {
                featureClass: "P",
                style: "full",
                maxRows: 12,
                name_startsWith: request.term
            },

            success: function(data) {
                response($.map(data.results, function(item) {
                    itunesJson = item;
                    return {
                        imgUrl: item.artworkUrl30 ,
                        label: item.trackName
                    }
                }));
            },
        });
    }
}).data("autocomplete")._renderItem = function(ul, item) {
    return $("<li />")
        .data("item.autocomplete", item)
        .append("<a><img src='" + item.imgUrl + "' alt='no photo' />" + item.label + "</a>")
        .appendTo(ul);
};​

Example: http://jsfiddle.net/Qhj5N/26/