带有远程数据源的基本 jquery 自动完成——怎么样？

Question

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

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

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

这是 my.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 需要它。

在此先感谢，这个问题一直困扰着我。

-特拉维斯

Answer 1

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

Answer 2

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

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

应该

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

我的测试想法的示例是只使用包含 ["test1,"test2"] 的 html 文件进行测试。在您的 URL 参数中调用此文件并查看。如果它有效，则它是您生成的错误 Z0ECD11C1D7A28740188 .

Answer 3

好的，所以我将其设置为在本地工作。 尝试以下操作：

测试.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>

测试数据.php

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

这里的区别是您提供自动完成 function 的选项的格式。 此外，为了确保您正确获取它们，我正在从谷歌加载这两个库。 请注意，您还需要 jquery ui css 文件。 这应该适用于测试。