Question

我目前正在开发一个Spring mvc项目，我正在使用jQuery autocomplete插件从服务器呈现的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 - Formatting the autocomplete results. Add image possible?

Jquery UI autocomplete - images IN the results overlay, not outside like the demo

How to change rendering of dropdown in jquery ui autocomplete attached to a class?

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

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

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

Answer 1

我无法帮助使用jquery.autocomplete插件，但是如果你无法使用它，那么Select2插件就具备了这个功能，并且在github {{3}上的示例页面上有详细记录。 }（查看"Data Sources -> Loading remote data"部分）。

也许你可能会从那里获得一些见解/灵感？希望这有用！

Answer 2

您需要添加.data("ui-autocomplete")._renderItem = function (ul, item) { 在我的AJAX响应中，item.label已经包含了所需格式正确的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响应，但我认为您可以从这里开始......

jQuery自动完成包括建议列表中的图像

2 个答案: