Получение jQuery autocomplete для отображения результатов в виде ссылок

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