jQuery UI 自动完成功能不起作用

Question

这是我的 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." }
]

Answer 1

引用：

可以自定义自动完成功能以使其工作
借助各种数据源，只需
指定源选项。一个数据
来源可以是：

• 包含本地数据的数组
• 一个字符串，指定 URL
• 回调

当使用字符串时，
自动完成插件期望
指向 URL 资源的字符串
将返回 JSON 数据。它可以在
同一主机或不同主机上
（必须提供 JSONP）。请求
参数“term”被添加到其中
网址。数据本身可以位于
与本地数据格式相同
如上所述。

你所做的事对我来说看起来很奇怪。我认为您实际上需要编辑服务器端脚本，以便它需要查询字符串变量 term 而不是字母 并且 返回一个字符串数组或 < 数组code>{label, value} 对象而不是 {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);
        }
    });
});

Answer 2

如果你想从 url 获取数据，你必须为源定义一个函数：

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

编辑：

在文档中它说：source 可以是一个 URL。在这种情况下，请尝试更改 JSON 响应，以在返回的对象中使用 'label' 而不是 'id'。

Answer 3

这是一个在 jQuery 1.5.1 中为我工作的脚本。

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