javascript - 对于转换为 `label` 和 `value` 的 JSON 流，jQuery 自动完成结果框不显示

Question

我让 jQuery 自动完成功能与显示在适当位置的自动完成搜索结果框一起使用。这是通过以下客户端 js 实现的服务器端搜索支持:

$("#someSearchTermInputBox").autocomplete(
{
    minLength: 2,
    source: "/searchThatReturnsStringListOfResults"
});

在这种情况下，服务器会向客户端发送回以下信息(通过 Chrome 调试器发送以下信息):

["Alice","Bob","Calvin","Dirk","Elvin","Fancy","Greg","Harry","Issey","Jack"]

对应的输入文本框为:

<input id="someSearchTermInputBox" name="someSearchTermInputBox"  placeholder="Search for people, events and places" type="search"

因为我需要更多功能，所以我更改了搜索以返回如下所示的 JSON:

[{"firstname":"Alice","lastname":"Anonymous","dateOfBirth":"1980-01-01","phone":"001-100-200-3001","email":"alice.anonymous@gmail.com"},{"firstname":"Bob","lastname":"Anonymous","dateOfBirth":"1987-02-07","phone":"001-100-200-3002","email":"bob.anonymous@gmail.com"},{"firstname":"Calvin","lastname":"Anonymous","dateOfBirth":"1984-02-09","phone":"001-100-200-3003","email":"calvin.anonymous@gmail.com"},{"firstname":"Dirk","lastname":"Anonymous","dateOfBirth":"1982-05-01","phone":"001-100-200-3004","email":"dirk.anonymous@gmail.com"},{"firstname":"Elvin","lastname":"Anonymous","dateOfBirth":"1980-07-05","phone":"001-100-200-3005","email":"elvin.anonymous@gmail.com"},{"firstname":"Fancy","lastname":"Anonymous","dateOfBirth":"1990-02-01","phone":"001-100-200-3006","email":"fancy.anonymous@gmail.com"},{"firstname":"Greg","lastname":"Anonymous","dateOfBirth":"1984-01-09","phone":"001-100-200-3007","email":"greg.anonymous@gmail.com"},{"firstname":"Harry","lastname":"Anonymous","dateOfBirth":"1989-11-10","phone":"001-100-200-3008","email":"harry.anonymous@gmail.com"},{"firstname":"Issey","lastname":"Anonymous","dateOfBirth":"1950-01-01","phone":"001-100-200-3009","email":"issey.anonymous@gmail.com"},{"firstname":"Jack","lastname":"Anonymous","dateOfBirth":"1970-10-01","phone":"001-100-200-3010","email":"jack.anonymous@gmail.com"}]

为了将结果拆分为 jQuery 自动完成兼容，我将客户端 js 更改为此，以将传入的 JSON 映射到 label 和 value 或 id (尝试了id和label):

$("someSearchTermInputBox").autocomplete(
    {
    minLength: 2,
    source: function (request, response)
    {
    $.ajax(
    {
        url: "/searchThatReturnsJSON",
        data: {term: request.term},
        dataType: "json",
        success: function (data)
        {
        // alert (JSON.stringify (data)); <-- shows up correctly
        // console.log (data);
        response ($.map(data, function (item)
             {
                 console.log (item.firstname);
                 return
                 { id: item.firstname; value: item.lastname };
             }));
        }
    });
},
});

我的标题如下(与之前的工作版本相同):

<script src="/js/jquery-ui-1.10.4/js/jquery-1.10.2.js" > </script>
<script src="/js/jquery-ui-1.10.4/js/jquery-ui-1.10.4.min.js" > </script>
<link rel="stylesheet" type="text/css" href="/js/jquery-ui-1.10.4/css/ui-lightness/jquery-ui-1.10.4.min.css" /> 

现在，我的自动完成框没有显示(它不是空的——它根本没有显示(我可以在调试器和服务器上看到与服务器发生的 Ajax 交互))。我在 Chrome 中执行此操作，因此我启动了调试器，我看到服务器正确返回了 JSON。我需要什么 HTML/CSS 魔法才能确保我的搜索结果显示出来？

在哪里可以找到 jQuery 网站上的文档(jQuery 自动完成主网站 - 该文档没有讨论标签或值，当然也没有讨论要操作的正确 div 元素)。

顺便说一句，为了在 map 调用中将元组返回到 response 中的正确方法，分隔符是逗号还是分号？ Chrome 给我一个错误 Uncaught SyntaxError: Unexpected token :，只有当我将元组中的分隔符更改为分号时，该错误才消失。

Answer 1

哇。我对 JS 令人难以置信的语法感到惊叹不已。无论如何，关键问题是使用 return 语句 {..} 括号。对于像我这样的 JS 菜鸟来说，试图掌握 JS 语法背后的任何逻辑以及在 return 语句中使用 K&R 风格的括号(我讨厌它，因为我是一个 Allman 括号)，这花费了无数的时间。家伙)。

无论如何，让它最终工作的代码是

$(document).ready (function ()
{
    $("someSearchTermInputBox").autocomplete(
    {
    minLength: 2,
    source: function (request, response)
    {
    $.ajax(
    {
        url: "/search",
        data: {term: request.term},
        dataType: "json",
        success: function (jsonDataReceivedFromServer)
        {
        //alert (JSON.stringify (jsonDataReceivedFromServer));
        // console.log (jsonDataReceivedFromServer);
        response ($.map(jsonDataReceivedFromServer, function (item)
            {
            console.log (item.firstname);
                            // NOTE: BRACKET START IN THE SAME LINE AS RETURN IN 
                            //       THE FOLLOWING LINE
            return {
                id: item.firstname, value: item.lastname };
            }));
        }
      });
     },
   });
});

无论如何，对于使用 Allman 缩进的人，我建议使用以下对 Allman 缩进友好的语法:

var someTuple = 
  {
      value: item.firstname,
      id:    item.lastname
  };
return someTuple;

特别感谢 SO 帖子 here和 here 。还有一篇关于此事的更好的帖子和策划的(？)意见here .

我希望这对某人有帮助，因为我希望更多的人遇到这个问题。