带有远程数据源的基本 jquery 自动完成功能——如何？答案

【问题标题】：basic jquery autocomplete with remote data source --how?带有远程数据源的基本 jquery 自动完成功能——如何？
【发布时间】：2012-10-15 22:32:51
【问题描述】：

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

阅读了文档

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 需要它。

先谢谢了，这个问题一直困扰着我。

-特拉维斯

【问题讨论】：

看起来您返回的 JSON 无效。试着把最后一个逗号去掉。那它有用吗？
我厌倦了删除逗号，它没有帮助。请参阅下面的评论。

标签： jquery autocomplete jquery-autocomplete

【解决方案1】：

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

【讨论】：

嗯，我认为本地他的意思是在javascript文件中本地定义。他仍在从本地服务器获取“远程”数据。我不相信他遇到了跨域问题。
感谢 AlienWebGuy。 Marc 说得对，本地数据是在 .html 文件的 javascript 部分中定义的数组，而“远程”数据是由运行在 localhost 上的服务器生成的。
这似乎是个问题。我一直在通过在我的文件系统上打开一个 .html 文件在我的浏览器中进行测试。当我在 Web 服务器上托管 .html 文件并从那里加载它时，自动完成功能按预期工作。

【解决方案2】：

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

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

应该是

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

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

【讨论】：

是的，正是我的建议。
@mark @daok 我做了这个改变，但没有效果。当我使用本地定义的 javascript 数组时，它们都可以工作：'code' ["fractal","FRACTAL","fractalzebra","frad","Fraet",] 和 ["fractal","FRACTAL"," fractalzebra","frad","Fraet"] 从我的服务器获取相同数据时，两种格式都不会显示自动完成弹出窗口。
我在使用 firebug 监控页面时注意到的一件事是资源“jquery.dimensions.js”无法加载，服务器返回 404。这并没有阻止本地数据呈现正确地在自动完成弹出窗口中，但这可能是一个问题吗？使用特定的 jquery 发布版本而不是文档中建议的主干分支中的代码会更好吗？

【解决方案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>

测试数据.php

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

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

【讨论】：

谢谢马克。我认为从谷歌加载 .js 文件是个好主意。不幸的是，对于您的示例代码，我得到了相同的结果——我可以弹出本地 javascript 数组数据，但从服务器返回的数据不会弹出。您是否在 HTTP 响应中设置了任何特定的内容类型或其他标头？
不，这就是它的全部内容。就这两个文件。如果您在端口 8000 上，请确保在我的示例中更新了 url。当您在自动完成框中键入时，您是否至少看到在您的萤火虫控制台中触发了请求？如果是这样，响应是什么样的？
每次在输入字段中输入字母时，Firebug 都会显示似乎是正确的 HTTP 请求/响应序列。出于测试目的，我让我的服务器返回上面数组的精确副本。您是否有指向您正在使用的特定 .css 文件的链接？我并不特别希望这是一个解决方案，但我在这里几乎没有想法。