当JSON来自URL时，自动完成功能无法正常工作？

我想实现一个jQuery自动完成控件到我们的HTML页面，但我会从URL资源接收我的JSON。当JSON来自URL时，自动完成功能无法正常工作？

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

如果我将源设置为WCF调用（source: "http://MyServer:86/Service1.svc/GetStates"），那么当我输入任何字母时将显示列表，但过滤/自动完成功能不起作用。

当JSON来自URL时，为什么不自动完成工作？

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>

来源

2017-08-31 rbhat

你看过开发控制台中的输出吗？发生了任何错误，或者源代码是否收到网络请求？ – forrestmid

没有javascript错误。组合框填充了正确的值。问题在于它没有执行自动完成。 – rbhat

从jQuery Autocomplete Documentation

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

这基本上表明您的URL，该端点返回JSON，将会有term查询参数将看起来像http://MyServer:86/Service1.svc/GetStates?term=AL被调用。然后，您需要一个服务器端脚本来接受该术语，并通过自动完成脚本发送到您的服务器的term参数筛选返回到自动填充的固定JSON。

来源

2017-08-31 18:21:47 forrestmid

我明白你的意思，但我不知道如何在代码中实现这一点。 – rbhat

您不能使用静态JSON文档。你必须实现一些服务器端脚本来读取JSON数据并根据'term'参数进行过滤。因此，'http：// MyServer：86/Service1.svc/GetStates'需要读取'term'参数，然后根据'term'的值过滤该JSON文档，最后返回已被过滤的JSON。 – forrestmid

处理参数不是问题;我将如何在上面张贴的HTML中添加该参数？我将如何包含'term'参数？ – rbhat

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

来源

2017-08-31 18:27:50

当JSON来自URL时，自动完成功能无法正常工作？

回答

相关问题