東西不能正常工作阿賈克斯搜索

Question

我有這個JavaScript這裏是使工作像一個音樂搜索引擎的搜索建議。我有這個問題在第一個字符鍵入它工作正常，但如果我鍵入更多的字符它告訴我我結果在一行沒有圖片中斷和everithyng。請有人看看並告訴我我做錯了什麼。這裏是樣本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

這裏有一些事情出錯了。主要問題是您應該覆蓋_renderItem函數來自定義顯示列表，如this demo中所示。

這意味着不是填充與HTML每個項目的label財產，你應該做這樣的事情：

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

例子：http://jsfiddle.net/Qhj5N/26/