Getting jQuery autocomplete to display results as links

问题

I am really new to jQuery and try to build an auto suggest functionality, but with no luck. So far I have watched a few tutorials and came up with at least working example, however I cannot extract exact data that I need from the service. The jQuery autocomplete function like this:

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

Service returns results in the following manner:

{"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' \/>"
}

I need the <li> items to be like following:

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

Any help or guidance is much appreciated.

回答1:

The first issue you have is that the JSON being returned by your server is not in the correct format to work with the autoComplete plugin. The plugin depends on the data in the response having label and value properties. You need to change the names of the name and author_url properties given in the response, like this:

[{
    "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"
}]

From there you just need to amend the rendering function to read those properties and format the HTML as required:

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

Working example

回答2:

Try to change the line".autocomplete( "instance" )._renderItem = function( ul, item ) {" with below code :

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

来源：https://stackoverflow.com/questions/35128952/getting-jquery-autocomplete-to-display-results-as-links

标签

jquery

jquery-autocomplete