Автозаполнение пользовательского интерфейса jQuery не работает - PullRequest
Новая
       7

Автозаполнение пользовательского интерфейса jQuery не работает

1 голос
/ 30 марта 2011

Это мой код JavaScript: 

<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
    $("input#suggestZams").autocomplete({
        source: "content/prevadzky/zam/zam_json2.php?letter=all",
        minLength: 1,
        delay: 0,
        select: function(event, ui) {
            alert(1);
        }
    });
});
//]]>
</script>

Это мой HTML: 

<input id="suggestZams" class="input" size="10" />

URL zam_json2.php?letter=all возвращает этот json: 

[
{ "id": "31440", "value": "Andrej\u010d\u00e1k, Ing." },
{ "id": "31690", "value": "Alexovi\u010d , Ing." },
{ "id": "31796", "value": "Antoni\u010d , Ing." },
{ "id": "31989", "value": "Antolik , Ing." },
{ "id": "32010", "value": "Ambrozov\u00e1 RNDr., PhD." },
{ "id": "32014", "value": "Aksam\u00edt" },
{ "id": "32024", "value": "Angelovi\u010d" },
{ "id": "32102", "value": "Andrej\u010d\u00e1k" },
{ "id": "32168", "value": "Avukov\u00e1 , Ing." },
{ "id": "32177", "value": "Andr\u00e1\u0161" },
{ "id": "32181", "value": "Andrej\u010d\u00e1kov\u00e1 , Mgr." },
{ "id": "32403", "value": "Arend\u00e1\u0161 , Bc." },
{ "id": "47379", "value": "An\u010fal" },
{ "id": "47399", "value": "Adam\u00edk , Ing." },
{ "id": "50022", "value": "Abo\u0161i" },
{ "id": "50085", "value": "Armer\u00eda Olmedo , Ing." },
{ "id": "53468", "value": "Anto\u0161" },
{ "id": "54837", "value": "Adamec , Ing." },
{ "id": "56659", "value": "Apostolou" },
{ "id": "57820", "value": "Alez\u00e1r" },
{ "id": "58576", "value": "Andrej\u010d\u00e1k , Bc." },
{ "id": "58587", "value": "Aronov\u00e1 , Ing." },
{ "id": "58595", "value": "Abaffy , Bc." },
{ "id": "58607", "value": "Adamec , Bc." },
{ "id": "58643", "value": "Antu\u0161 , Ing." },
{ "id": "62277", "value": "Adam\u010d\u00e1k , Mgr." },
{ "id": "62379", "value": "Andruch" },
{ "id": "63415", "value": "Adamkovi\u010d , Ing." }
]

Ответы [ 3 ]

4 голосов
/ 30 марта 2011

Цитата:

Автозаполнение можно настроить для работы с различными источниками данных, просто указав опцию источника. Данные Источник может быть:

  • Массив с локальными данными
  • Строка, указав URL
  • Обратный звонок

Когда используется строка, Плагин автозаполнения ожидает, что строка, указывающая на ресурс URL, который вернет данные JSON. Это может быть на тот же хост или другой (должен предоставить JSONP). Запрос параметр "термин" добавляется к этому URL. Сами данные могут быть в тот же формат, что и локальные данные описано выше.

То, что вы делаете, выглядит странно для меня. Я думаю, что вам на самом деле нужно будет отредактировать скрипт на стороне сервера так, чтобы он ожидал переменную строки запроса term вместо буквы , а возвращает массив строк или массив {label, value} объектов вместо { значение, id}.

Если URL content/prevadzky/zam/zam_json2.php?letter=all предоставляет «полный» список слов одновременно, вы можете сделать что-то вроде этого: 

$.getJSON("content/prevadzky/zam/zam_json2.php?letter=all", function(data) {
    var datacopy = $.map(data, function(item) {
        return {
            label: item.value,
            value: item.id
        };
    });
    $("input#suggestZams").autocomplete({
        source: datacopy,
        minLength: 1,
        delay: 0,
        select: function(event, ui) {
            alert(typeof ui);
        }
    });
});
2 голосов
/ 30 марта 2011

Если вы хотите получить данные из URL, вы должны определить функцию для источника: 

source: function( request, response ) {
    $.ajax({url: "content/prevadzky/zam/zam_json2.php?letter=all",
            dataType: "json",
            ...
           });
    },
...

EDIT:

В документах написано: source может быть URL. В этом случае попытайтесь изменить в ответе JSON значение 'label' вместо 'id' в возвращаемых объектах.

1 голос
/ 30 марта 2011

Вот скрипт, который работает для меня в jQuery 1.5.1. 

source: function( request, response ) {
    $.ajax({
        url: "...",
        dataType: "json",
        ...
        success: function( data ) {
            # data = json response
        }
    });
}
...