我无法让 jQuery-UI 的自动完成功能显示返回的项目

Question

我无法使用 jQuery-UI 的自动完成小部件从服务器获取返回数据以显示在我的表单上。 （输入元素下方形成一个狭窄的“返回框”，但未填充）

我正在运行最新版本的 jQuery 和 jQuery-UI，并且我的返回数据是经过验证的 JSON (http://jsonlint.com/)。验证器插件（可能导致类似问题）不是我页面的一部分。

我们将不胜感激。

谢谢/布鲁斯

我的js是：

var ac_config = {
    source: "scripts/ajax_studentroll.asp?id=do_name",
    select: function(event, ui){
        $("#s_name2").val(ui.item.sname);
    },
    minLength:2
};
$("#s_name2").autocomplete(ac_config);

我的html是：

<form action="scripts/ajax_studentroll.asp?id=getinfo" id="getStudentInfo" method="post">
    <p>
        <label class="label20" for="s_name">Enter the user's first name or surname,</label>
        <input id="s_name2" name="s_name2" value="" type="text" />&nbsp;
        <button class="fg-button_s ui-state-default ui-corner-all" type="submit">Get!</button>
    </p>
</form>

返回的 JSON 格式为：

[{"sname":"David Jones"},{"sname":"David McKay"},{"sname":"David Perry"}]

Answer 1

autocomplete 小部件需要一个值数组。

如果您要使用自定义数据格式（您需要这样做），您需要覆盖自动完成实例上的 _renderItem，如 http://jqueryui.com/demos/autocomplete/#custom-data 所示（单击该页面上的“查看源代码”链接并注意如何他们从输入的.data() 中获取实例，并覆盖_renderItem)

Answer 2

来自fine manual：

预期的数据格式

来自本地数据、url 或回调的数据可以有两种变体：

• 字符串数组：
  [ "Choice1", "Choice2" ]
• 具有标签和值属性的对象数组：
  [ { label: "Choice1", value: "value1" }, ... ]

所以您的 JSON 不会以小部件期望的格式返回，您可能只想调整服务器以返回一个简单的匹配字符串数组：

["David Jones","David McKay","David Perry"]