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

来自fine manual：

预期的数据格式

来自本地数据，网址或回调的数据可以有两种变体：


一串字符串：
  [ "Choice1", "Choice2" ]

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

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

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

Answer 2

autocomplete小部件需要一组值。

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

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

2 个答案: