Jquery自動完成UI圖像選項

我正在使用JQuery自動完成UI與我的rails應用程序，它工作得很好。我在我的index.js.erb中發送了下面的JSON，並且值和標題都運行良好。我發現這個例子使用：img =>「＃（h {@ object.img_url}）」，但我一直無法使它工作。Jquery自動完成UI圖像選項

[{"value":"Moby Dick","img":"http://ecx.images-amazon.com/images/I/517TZoo2JL._SL75_.jpg","label":"Moby Dick"}]

這是行不通的？或者這個例子不正確。如果您對如何讓圖片顯示有任何建議，我會非常感激。下面是我在我的應用程序中使用的JS代碼.js

$(document).ready(function(){ 
$(".auto_search_complete").autocomplete({ 
     dataType: "json", 
     source: '/books.js', 
     minLength: 3 
    }) 
})

謝謝！ James

來源

2011-01-06 James

檢查您的網絡服務器日誌，看它是否實際上將它發送到正確的路線。 – s84 2011-01-06 22:24:21

您可以嘗試並更改_renderItem專用函數以按照您需要的方式呈現列表。喜歡的東西也許以下幾點：

$(document).ready(function(){ 
    $(".auto_search_complete").autocomplete({   
     dataType: "json",   
     source: '/books.js',   
     minLength: 3  
    }).data("autocomplete")._renderItem = function(ul, item) { 
     return $("<li></li>") 
      .data("item.autocomplete", item) 
      .append("<a>" +"<img src='" + item.img + "'>" + item.label + "</a>") 
      .appendTo(container); 
    } 
})

我相信，這是非常相似的例子here。希望有幫助。

來源

2011-01-06 22:41:03 Shaun

這是我最終使用的代碼 - 只是從肖恩的建議上面修改了一點。

.data("autocomplete")._renderItem = function(ul, item) { 
return $("<li></li>") 
    .data("item.autocomplete", item) 
    .append("<img src='" + item.img +" '>" + item.label) 
    .appendTo(ul);

來源

2011-01-06 23:23:34 James

Jquery自動完成UI圖像選項

回答

相關問題