JQuery UI автозаполнения - результаты сервера не отображаются

Question

jQuery UI autocomplete получает действительные результаты json с сервера, но не вставляет их в DOM / отображение в браузере.Когда я встраиваю результаты в страницу, автозаполнение работает должным образом.

Javascript:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js" type="text/javascript"></script>

    $('#query').autocomplete({
        source: '/ajax/abc',
        /*source: ['alpha', 'beta', 'gamma'],*/
        minLength: 2,
        select: function(e,ui) {
            $('#query').val( ui.item.value );
            $('form#search').submit(); 
        }
    });

JSON-результат из / ajax / abc (обнаружен с помощью Firebug):

["alpha", "beta", "gamma"]

Сгенерированный источник из Firefox после ввода "gam" на вход

(сервер):

<ul style="z-index: 1; top: 0px; left: 0px; display: none;" aria-activedescendant="ui-active-menuitem" role="listbox" class="ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all"></ul>

(встроенные результаты):

<ul style="z-index: 1; top: 31px; left: 185px; display: block; width: 149px;" aria-activedescendant="ui-active-menuitem" role="listbox" class="ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all"><li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all">gamma</a></li></ul>

Answer 1

Был конфликт с плагином проверки jquery, который я скачал несколько недель назад. Я точно не знаю, что это был за конфликт, но я определил его, комментируя каждый сценарий по одному.

Я загрузил последнюю, минимизированную версию проверки jquery с CDN, что решило проблему.

Answer 2

Возможно, MIME-тип неправильный, так что jQuery не обрабатывает JSON как JSON.Проверьте MIME-тип вашего вывода JSON.Это должно быть 'application / json'

Answer 3

В худшем случае вы можете установить функцию в качестве источника.в этой функции вы можете дать массив в ответ.Также вы можете загрузить свой JSON в эту функцию.

source: function(request, response) {
   /*
    * response is the typed text like 'gam'
    * request is the function that you have to call with the results
    */
   /* here your code */
   response(results);
}

Answer 4

Ваш удаленный сервер возвращает правильный заголовок, чтобы разрешить это?

Access-Control-Allow-Origin: *

см. Этот пример: http://jqueryui.com/demos/autocomplete/remote-jsonp.html Результат возвращает заголовок с этим в нем. Это необходимо для межсерверных вызовов.