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 );
    };
  });

服务以下列方式返回结果：

{"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格式不正确，无法使用autoComplete插件。该插件取决于具有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自动完成功能以将结果显示为链接

2 个答案: