Question

使用远程数据获取自动完成功能的正确方法是什么？我在

阅读了该文件

http://docs.jquery.com/Plugins/Autocomplete

并运行示例代码。该示例适用于存储在JS数组中的本地数据，但是当我使用远程URL时，它不起作用。我看到正在生成自动完成HTTP请求，我可以看到我的本地Web服务器使用正确的数据进行响应。但是自动完成信息不会弹出。

这是我的.html代码，它只与jquery文档中的示例相差2行：

<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <link rel="stylesheet" href="http://dev.jquery.com/view/trunk/plugins/autocomplete/demo/main.css" type="text/css" />
  <link rel="stylesheet" href="http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.css" type="text/css" />
  <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/lib/jquery.bgiframe.min.js"></script>
  <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/lib/jquery.dimensions.js"></script>
  <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.js"></script>
  <script>
  $(document).ready(function(){
     url = "http://localhost:8000/autocomplete/"
     $("#example").autocomplete(url);
  });
  </script>

   </head>
   <body>
     API Reference: <input id="example" /> (try "C" or "E")
   </body>
</html>

.htm文件中是否还需要其他内容？我应该更改服务器返回的数据格式吗？目前，当我在文本框中输入“fr”时，我的服务器返回：

["fractal","FRACTAL","fractalzebra","frad","Fraet",]

我只是想显示一个简单的字符串列表，我不需要在服务器响应中包含任何其他数据，除非事实证明jquery需要它。

先谢谢，这个问题确实困扰我了。

-Travis

Answer 1

确保你还没有遇到Same Origin Policy问题，在jQuery 1.5之前，要求所有不同的源域ajax调用都是jsonp，现在可以用crossDomain实现：true。就自动完成插件而言，我不知道它是如何获取数据所以这可能不适用，但你所说的本地版本工作和远程数据没有让我立即想到这一点。

Answer 2

从我看到的，服务器应返回一个有效的JSON字符串，最后一个条目无效，因为它不包含引号。我认为你应该通过返回一组简单的数据来做一个简单的测试，而不是用你的后端代码生成的东西。

["fractal","FRACTAL","fractalzebra","frad","Fraet",]

应该是

["fractal","FRACTAL","fractalzebra","frad","Fraet"]

我的测试想法的示例是使用包含[“test1，”test2“]的html文件进行测试。在您的URL参数中调用此文件并查看。如果它的工作原理比您生成的JSON字符串那样包含错误。

Answer 3

好的，所以我把它设置在我的本地工作。请尝试以下方法：

test.php的

<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"></script>
  <script>
  $(document).ready(function(){
     url = "http://localhost/test-data.php"
     $("#example").autocomplete({
         source: url
     });
  });
  </script>
</head>
<body>
 API Reference: <input id="example" />
</body>
</html>

测试data.php

["test", "tooth", "no way", "blah"]

这里的差异是您提供自动完成功能的选项的格式。另外，为了确保您正确使用它们，我正在从谷歌加载这两个库。请注意，您还需要jquery ui css文件。这应该可以用于测试。

基本的jquery自动完成与远程数据源 - 如何？

3 个答案: