获取 jQuery 自动完成以将结果显示为链接

Question

我是 jQuery 的新手，我尝试构建一个自动建议功能，但没有成功。到目前为止，我已经观看了一些教程并且至少提出了工作示例，但是我无法从服务中提取我需要的确切数据。 jQuery 自动完成功能如下：

$(function() {
    var url = MyAutocomplete.url + "?action=search";

    $( "#author" ).autocomplete({
      minLength: 2,
      source: url,
      focus: function( event, ui ) {
        $( "#author" ).val( ui.item.label );
        return false;
      },
      select: function( event, ui ) {
        $( "#author" ).val( ui.item.label );
        $( "#author-id" ).val( ui.item.value );
        $( "#author-description" ).html( ui.item.desc );
        $( "#author-icon" ).attr( "src", "images/" + ui.item.icon );

        return false;
      }
    })
    .autocomplete( "instance" )._renderItem = function( ul, item ) {
      return $( "<li>" )
        .append( "<a>" + item.label + "<br>" + item.desc + "</a>" )
        .appendTo( ul );
    };
  });

服务 returns 的结果如下：

{"name":"John Doe",
"author_url":"http:\/\/example.com\/author\/john-doe\/",
"avatar":"<img alt='John Doe' src='http:\/\/example.com\/uploads\/1425487372-96x96.jpg' height='96' width='96' \/>"
}

我需要 <li> 项如下所示：

<a href="http://example.com/author/john-doe">
<img src="http://example.com/uploads/1425487372-96x96.jpg/>
John Doe
</a>

非常感谢任何帮助或指导。

Answer 1

您遇到的第一个问题是服务器返回的 JSON 格式不正确，无法与自动完成插件一起使用。该插件取决于响应中具有 label 和 value 属性的数据。您需要更改响应中给出的 name 和 author_url 属性的名称，如下所示：

[{
    "label": "John Doe",
    "value": "http:\/\/example.com\/author\/john-doe\/",
    "avatar": "http:\/\/example.com\/uploads\/1425487372-96x96.jpg"
},{
    "label": "Jane Doe",
    "value": "http:\/\/example.com\/author\/jane-doe\/",
    "avatar": "http:\/\/example.com\/uploads\/1425487372-96x96.jpg"
}]

从那里您只需要修改渲染函数以读取这些属性并根据需要格式化 HTML：

.autocomplete("instance")._renderItem = function(ul, item) {
    return $("<li>")
        .append('<a href="' + item.value + '"><img src="' + item.avatar + '" />' + item.label + '</a>')
        .appendTo(ul);
};

Working example

Answer 2

尝试使用以下代码更改行“.autocomplete( "instance" )._renderItem = function( ul, item ) {”：

.data( "autocomplete" )._renderItem = function( ul, item ) {
return $( "<li></li>" )
            .data( "item.autocomplete", item )
            .append( "<a>" + item.label + "<br>" + item.desc + "</a>" )
            .appendTo( ul );
    };

获取 jQuery 自动完成以将结果显示为链接

Getting jQuery autocomplete to display results as links

jquery

jquery-autocomplete