Виджет автозаполнения jQuery UI и renderItem в Chrome

Question

Я использую виджет автозаполнения, чтобы отображать раскрывающийся список предложений, когда пользователь вводит в поле ввода.

• JQuery 1.10.2
• JQuery UI JS 1.11.2
• JQuery UI CSS 1.11.2

Все, кажется, отлично работает в Firefox (29.0.1) и Safari (7,0 .6), но после нескольких часов попыток разных действий он не работает в Chrome (38.0).

Редактировать: никаких предупреждений, ошибок и выпадающего меню не отображается.

$("#MyInput").autocomplete({ 
    source: "/contacts/ajax_search.json" 
}).data("uiAutocomplete")._renderItem = function(ul, item){ 
    return $("<li>").append("<a>" + item.Contact.name + "</a>").appendTo(ul); 
} 

Данные от /contacts/ajax_search.json выглядят следующим образом;

[{"Contact":{"id":"1669","name":"Marta Smith"}}] 

В Chrome renderItem не кажется, даже дозвонились, т.е. console.log(item) внутри функции не делает ничего.

Любая помощь очень ценится!

Answer 1

Проблема заключается в том, что Chrome обрабатывает асинхронные запросы ajax, так как нет возможности установить виджет автозаполнения для синхронного запроса через стандартные параметры.

Решение заключается в использовании специальной функции source для извлечения данных;

$("#MyInput").autocomplete({ 
    source: function(request, response) { 
     $.ajax({ 
      url: "/contacts/ajax_search.json?term=" + request.term, 
      async: false, 
      success: function(data) { 
       response(data); 
      } 
     }); 
    } 
}).data("uiAutocomplete")._renderItem = function(ul, item){ 
    return $("<li>").append("<a>" + item.Contact.name + "</a>").appendTo(ul); 
}