如何让 JQuery Autocomplete 与 Ajax 和 JSON 配合使用？

Question

我对 JQuery 的自动完成功能很陌生。我正在尝试让这段代码正常工作。每次有人在输入字段中键入内容时，下面的代码都会正确执行 ajax 轮询。但是它不会降低自动完成功能。

$(document).ready(function() {
  $("#search").autocomplete({
    source: 'cityajax'
  });
});

这是它从服务器成功提取的文件。 mime/内容类型设置为 text/json。

['Overland Park','Hiawatha','Columbus','Lenexa','Pittsburg','Dodge City','Mission']

当实际源设置为 javascript 本身中的内联 JSON var 时，同样的事情也可以正常工作。这个问题一定是一些愚蠢的简单问题，但我花了一个半小时试图找出问题所在，但我遇到了障碍。我是否缺少某种必需的参数？

编辑：将我的“json”更改为这个有效的 JSON，仍然是同样的问题。

{"1": "Overland Park","1": "Hiawatha","1": "Columbus","1": "Lenexa","1": "Pittsburg","1": "Dodge City"}

编辑：再次将我的“json”更改为此。

[{"1": "Overland Park"},{"2": "Hiawatha"},{"3": "Columbus"},{"4": "Lenexa"},{"5": "Pittsburg"},{"6": "Dodge City"}]

编辑：将我的“json”更改为此，一切都很好。

[{"label": "欧弗兰帕克"},{"label": "海华沙"},{"label": "哥伦布"},{"label": "Lenexa"},{"5": "匹兹堡" },{"label": "道奇城"}]

Answer 1

你用的方法肯定是行不通的。我想问你怎么知道数据肯定已经到达那里。您是否通过 Firebug 在 XHR 中看到它？如果您不使用插件的远程源功能，您如何调用它？

按照您定义的方式，没有文件扩展名。因此，它将源设置为名为 cityajax 的字符串，该字符串无效。如果您的数据源是一个名为 cityajax 的变量，那么您可以将该变量放在那里而不带引号。

Jsonlint 将允许您测试数据的有效性。

Answer 2

自动完成的简单示例：

$( "#test" ).autocomplete({
            source: "search.php"
                        })

在 search.php 中

<?php
    echo [{"label":"Overland Park"},{"label":"Hiawatha"}]
?>

如果您想要本地搜索，而不是 Ajax，则使用以下代码

var cityajax = ['Overland Park','Hiawatha','Columbus','Lenexa','Pittsburg','Dodge City','Mission']

$(document).ready(function() {
  $("#search").autocomplete({
    source: cityajax
  });
});