автозаполнение пользовательского интерфейса jquery - результаты сервера не отображаются

#jquery #jquery-ui #autocomplete

#jquery #jquery-ui #автозаполнение

Вопрос:

Автозаполнение пользовательского интерфейса jQuery извлекает действительные результаты json с сервера, но не вставляет их в DOM / display в браузере. Когда я встраиваю результаты на страницу, автозаполнение работает так, как ожидалось.

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):

[«альфа», «бета»,»гамма»]

Сгенерированный исходный код из 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>

Ответ №1:

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

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

Ответ №2:

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

Управление доступом-Разрешить-источник: *

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

1. возможно, мне не следовало использовать слово удаленно. это локальный сервер. я просто имел в виду, что он вызывает сервер, а не использует встроенные результаты.

2. тип mime должен быть таким: Content-Type: application / json;charset=UTF-8

3. по-прежнему никаких результатов, когда я форсирую этот тип контента.

Ответ №3:

Возможно, mime-тип неверен, поэтому jQuery не обрабатывает json как json. Проверьте mime-тип вашего выходного json. Это должно быть ‘application / json’

1. Если вы используете PHP, установите это перед вашим выводом json: header(‘Content-type: application / json’);

2. по-прежнему никаких результатов, когда я форсирую этот тип контента

3. Каков результат вашего скрипта в Firebug? Хорошо, я видел это в тексте. Sry

4. У вас есть ссылка на вашу страницу?

5. извините, к сожалению, мы находимся в скрытом режиме.

Ответ №4:

В худшем случае вы можете установить функцию в качестве источника. в этой функции вы можете выдать массив в ответ. Также вы можете загрузить свой 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);
}