0

我无法使用 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"}]
4

2 回答 2

1

来自精美手册

预期数据格式

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

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

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

["David Jones","David McKay","David Perry"]
于 2012-05-02T02:18:48.680 回答
1

autocomplete部件需要一个值数组。

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

于 2012-05-02T02:19:18.573 回答