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图像选项

回答

相关问题