Question

我试图在我们的HTML页面中实现jquery自动完成控件，但我将从URL资源中接收我的JSON。

这是代码。如果我将源设置为内联JSON数组（source: data），则自动完成功能正常。

如果我将源设置为WCF呼叫（source: "http://MyServer:86/Service1.svc/GetStates"），则在输入任何字母时会显示该列表，但过滤/自动完成功能无效。

当JSON来自网址时，为什么自动完成功能不起作用？

URL中的json如下所示：[{"value":"AK","label":"Alaska"},{"value":"AL","label":"Alabama"}]，格式与内联json完全相同。

<!DOCTYPE html>
<html>
<head>
    <title>jQuery UI Autocomplete: Using Label-Value Pairs</title>
    <link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/ui-darkness/jquery-ui.min.css" rel="stylesheet">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
</head>
<body>
    <p>Default Behavior<br>
        <input id="autocomplete1" type="text" placeholder="U.S. state name" name="code"></p>
    <script>
        var data = [
            { value: "AL", label: "Alabama" },
            { value: "AK", label: "Alaska" },
            { value: "AZ", label: "Arizona" },
            { value: "AR", label: "Arkansas" },
            { value: "CA", label: "California" }
        ];
        $(function() {
            $("#autocomplete1").autocomplete({
                source: "http://MyServer:86/Service1.svc/GetStates",
                dataType: 'json'
            });
        });
    </script>
</body>
</html>

Answer 1

来自jQuery Autocomplete Documentation

当使用字符串[作为源的值]时，自动完成插件期望该字符串指向将返回JSON数据的URL资源。它可以位于同一主机上，也可以位于不同的主机上（必须支持CORS）。 自动完成插件不会过滤结果，而是添加一个查询字符串，其中包含一个术语字段，服务器端脚本应使用该字段来过滤结果。例如，如果源选项设置为＆＃34; http://example.com＆＃34;并且用户键入foo，将向http://example.com?term=foo发出GET请求。数据本身的格式与上述本地数据的格式相同。

这基本上说明将使用term查询参数调用您的URL（返回JSON的端点），该参数看起来像http://MyServer:86/Service1.svc/GetStates?term=AL。然后，您需要一个服务器端脚本来获取该术语，并通过自动完成脚本发送到您的服务器的term参数过滤返回到自动完成的固定JSON。

Answer 2

如果您使用url字符串，则需要在后端实现它。而不是你可以使用源作为功能选项， this stack overflow post和答案有一个如何实现这一目标的例子。

当JSON来自URL时，自动完成功能不起作用？

2 个答案: