jQuery自动完成功能在建议列表中包含图像

Question

我目前正在从事Spring mvc项目，在该项目中，我正在使用jQuery自动完成插件从服务器渲染的JSON文件中加载数据。

$('#searchTerm').autocomplete({
    serviceUrl: '${ctx}/search/searchAutocomplete',
    paramName: "parameterName",
    delimiter: ",",
    transformResult: function(response) {
        return {
            suggestions: $.map($.parseJSON(response), function(item) {
                return {
                    value: item.userName + " , " + item.userId + ", " + 
                    item.pathToImageFile , data: item 
                };
             })
         };
     },

     onSelect: function (suggestion) {
          $(this).val(suggestion.data.userName);
          console.log(suggestion.data.userId);
          console.log(suggestion.data.pathToImageFile);
          window.location.href = "${ctx}/userPage?   
              userID="+suggestion.data.userId;
     }
 });

此代码按预期方式工作。 我可以在建议列表中显示建议的数据，并且可以在选择项目时重定向到另一个页面。

我的询问是，如何使用item.pathToImageFile中的数据生成建议列表中的个人资料图片的图像？ 类似于Facebook在搜索时显示用户或组的个人资料图片的方式。

我在这里浏览了以下类似主题：

jQuery UI-格式化自动完成结果。 可以添加图片吗？

jQuery UI自动完成-图片覆盖在结果中，而不是像演示一样在外部

如何更改附加到类的jQuery UI自动完成中下拉列表的呈现？

但是我似乎无法在代码中应用可接受的答案。 在普通的html和javascript中，我知道每个建议项的语法应如下所示：

'<img src="'+ suggestion.data.pathToImageFile + '"/>' 
'<p>' +suggestion.data.userName + '</p>'

我只是似乎无法弄清楚自动完成插件的配置和内置方法。 该文档完全没有帮助。 希望有人可以帮助我。 谢谢

Answer 1

我不能与jquery.autocomplete插件的帮助，但如果你不能得到它的工作的选择二插件拥有此功能，它是有据可查的例子页面在github 这里 （看在"Data Sources -> Loading remote data" ，部分）。

也许您可以从那里得到一些见识/启发？ 希望对您有所帮助！

Answer 2

您需要添加.data("ui-autocomplete")._renderItem = function (ul, item) {在我的AJAX响应中，item.label已经包含所需的HTML格式正确的HTML代码（我不使用图片，但是其他格式）

$('#searchTerm').autocomplete({   
    serviceUrl: '${ctx}/search/searchAutocomplete',
    paramName: "parameterName",
    delimiter: ","

 /* This is the part to be implemennted */
 }).data("ui-autocomplete")._renderItem = function (ul, item) {
         return $("<li></li>")
             .data("item.autocomplete", item)
             .append("<a>" + item.label + "</a>")
             .appendTo(ul);
 };

您需要调整代码和您的AJAX响应，但我认为您可以从这里开始使用它...