Jquery Autocomplete“几乎”工作，但列表没有完全填充答案

【问题标题】：Jquery Autocomplete "almost" working but list doesn't populate completelyJquery Autocomplete“几乎”工作，但列表没有完全填充
【发布时间】：2012-12-20 12:08:37
【问题描述】：

我正在尝试在 jquery 中使用自动完成功能，它适用于演示数据，但我无法使其适用于我自己的数据源。我正在尝试编写一个邮件程序，用户只需输入几个字母的人名，联系人数据库有助于自动完成，以便相应的电子邮件显示在“收件人”字段中。

我已包含以下文件：

  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

我在 document.load 中的 jQuery 代码如下：

   $(function() {
    function log( message ) {
        $('#to').append(message);
        console.log(message);
    }

   $( "#search" ).autocomplete({
        source: "search.php",
        minLength: 2,
        select: function( event, ui ) {
     log( ui.item? ui.item.email : "NO" );
        }
    }); 
});

我的 HTML 是：

<div class='ui-widget'><input type='text' class='medium' id='search' /></div> <br />
To:<br />
<div class='ui-widget'> <textarea type='text' style='width:80%; height:24px;' id='to' class='ui-widget-content'></textarea></div>

就 json 而言，search.php 的结果很好，这是按下字母“Ahmed”时的输出示例：

[{"email":"saddi@yahoo.com","name":"Ahmed Qasim"},{"email":"aaaab@alangari.com.sa","name":"Ahmed Abbas"},{"email":"mokhlef@yahoo.com","name":"Ahmed Sahdi"}]

我知道我从 search.php 得到了这个响应，因为我检查了 Firebug 并看到了它，但它没有显示在搜索输入字段下方...相反，显示的只是一个树桩列表...如下图所示。

但是当我在这里使用演示代码时，这完全一样的事情按预期工作：demo 为什么列表没有正确显示？可以显示多少数据有限制吗？我只粘贴了我得到的 JSON 输出中的 3 个条目，但有几十个。

【问题讨论】：

标签： php json jquery-ui autocomplete jquery-autocomplete

【解决方案1】：

您从服务器返回的内容包含email 和name 字段，jquery ui 需要value 和label 字段。

[{"label":"Ahmed Abbas", value: "Ahmed Abbas"}]

label 是您在自动完成列表中看到的内容，value 是您选择项目时将获得的值。

【讨论】：

【解决方案2】：

我认为 keune 的诊断是正确的。如果你不想改变 search.php 的输出，你可以这样做：

            $( "#search" ).autocomplete({
                source: function (request, response) {

                    $.ajax({
                        url: "search.php",
                        type: "POST",
                        dataType: "json",
                        data: { searchText: myQuery, maxResults: 10 },
                        success: function(data) {
                            var mappedData = $.map(data,
                                function(item) {
                                    return {
                                        label: item.name,
                                        value: item.email,
                                        id: item.email
                                    };
                                });

                            response(mappedData);
                            }
                        });
                }, ....

【讨论】：

我们应该能够投票改变接受的答案。当无法更改现有数据馈送以匹配某些 UI 小部件的默认设置时，这与 OP 的问题（和我的）更相关。