在jQuery自动完成中动态发送数据和接收数据答案

【问题标题】：Dynamically send data and receive data in jQuery autocomplete在jQuery自动完成中动态发送数据和接收数据
【发布时间】：2011-03-18 11:48:19
【问题描述】：

我正在使用 jQuery 的自动完成插件来填充文本框元素。每当在文本框中输入单词时，我都希望数据来自 API 调用。没有预定义的数组要传递给自动完成函数，它是从 PHP 脚本动态生成的。我正在使用的代码，

$(document).ready(function(){
     $("#textbox").autocomplete("myurl.php");
});

PHP 脚本将一个键（即$__GET['key']）作为响应值，并在此基础上查询数据库并给出 JSON 输出。

但这不起作用，我怎样才能将键值发送到 PHP 脚本并获取 JSON 返回值并填充我的自动完成元素？

【问题讨论】：

标签： jquery jquery-autocomplete

【解决方案1】：

根据此页面：http://docs.jquery.com/Plugins/Autocomplete/autocomplete#url_or_dataoptions，您的 PHP 脚本需要以 $_GET['p'] 作为输入文本，$_GET['limit'] 作为最大条目数。如果我理解正确，您的脚本正在寻找 'key' 参数，而它应该寻找 'p' 参数。

它还说响应应该是新行中的每个单词，因此您需要为数据库中的每个单词输入echo "$word\n";，而不是作为 JSON 传递。

或者，如果您打算使用 JSON，则可以使用类似以下 JQuery 的方式加载数据：

<script type="text/javascript">
  function getData( keyTxt ) {
    // Send GET request through AJAX
    $.get( 'myurl.php',
           // Set up your query params
           {key:keyTxt},
           // Callback for when the datais returned
           function( data ) {
            // Assuming your PHP puts returns JSON containing the "txt" array
            // Convert the array of words into a space-delimited string
            completeData = data.txt.join( ' ' );
            // Run autocomplete.
            $('textbox#textboxID').autocomplete( completeData )
           },
           // Tell JQuery you're returning json
           'json');
</script>

您的 PHP 将接受“key”参数，查询您的数据库，然后在名为“txt”的单词数组上使用 json_encode( )。

【讨论】：

@ianhales 我已手动通过查询字符串传递关键字（即 myurl.php?key=php），它返回 JSON，但无法填充自动完成元素。
我不确定这是一种非常干净的方法。如果您转到浏览器中的 url 并手动输入查询值，您是否检查过 PHP 输出的内容？像var_dump( $arr ) 或print_r( $arr ) 这样的东西会打印出你要出去的数组/对象。此外，AFAIK“自动完成”不接受 JSON 作为输入。
@ianhales 是的，它有效，但它给出了数组，就像 Array([0] => php, [1] => jquery, ...)。但无法将数组作为数组。
我认为你需要在你的 PHP 中做echo implode("\n", $arr);。根据我上面列出的网站，这将获取您的单词数组，并在换行符上输出每个单词的字符串:)
@ianhales 是的，我做到了，它工作得很好，谢谢你，还有一件事我怎样才能自动完成以显示所有匹配的关键字，就像我选择了 PHP 并且我的列表有 PHP， PHP Framework，PHP 5，那么它应该显示所有 3 个选项。现在自动完成功能过滤来自服务器的数据数组。

【解决方案2】：

AFAIK 您在 PHP 脚本中收到的参数具有键“q”（即$search = $_GET['q'];）

详情请见http://docs.jquery.com/Plugins/Autocomplete/autocomplete#url_or_dataoptions。

【讨论】：

是的，它成功了，它从服务器发回一个 JSON，但无法填充自动完成元素。