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：

[{＆＃34;姓名＆＃34;：＆＃34;爱丽丝＆＃34;＆＃34;姓＆＃34;：＆＃34;匿名＆＃34;＆＃34; DATEOFBIRTH＆＃34 ;: ＃＆34; 1980-01-01＆＃34;＆＃34;电话＆＃34;：＆＃34; 001-100-200-3001＆＃34;＆＃34;电子邮件＆＃34;：＆＃34; alice.anonymous@gmail.com"}，{＆＃34;姓名＆＃34;：＆＃34;鲍勃＆＃34;＆＃34;姓＆＃34;：＆＃34;匿名＆＃34;，＆＃34;出生日期＆＃34;：＆＃34; 1987年2月7日＆＃34;＆＃34;电话＆＃34;：＆＃34; 001-100-200-3002＆＃34;＆＃34;＆电子邮件＃34;：＆＃34; bob.anonymous@gmail.com"}，{＆＃34;姓名＆＃34;：＆＃34;卡尔文＆＃34;＆＃34;姓＆＃34;：＆＃ 34;匿名＆＃34;＆＃34; DATEOFBIRTH＆＃34;：＆＃34; 1984年2月9日＆＃34;＆＃34;电话＆＃34;：＆＃34; 001-100-200-3003＆＃ 34;，＆＃34;电子邮件＆＃34;：＆＃34; calvin.anonymous@gmail.com"}，{＆＃34;姓名＆＃34;：＆＃34;德克＆＃34;＆＃34 ;名字＆＃34;：＆＃34;匿名＆＃34;＆＃34; DATEOFBIRTH＆＃34;：＆＃34; 1982年5月1日和＃34;＆＃34;电话＆＃34;：＆＃34; 001-100-200-3004＆＃34;＆＃34;电子邮件＆＃34;：＆＃34; dirk.anonymous@gmail.com"}，{＆＃34;姓名＆＃34;：＆＃34;埃尔文＆＃34;＆＃34;姓＆＃34;：＆＃34;匿名＆＃34;＆＃34; DATEOFBIRTH＆＃34;：＆＃34; 1980年7月5日＆＃34;＆＃34;电话＆＃34;：＆＃34; 001-100-200-3005＆＃34;＆＃34;电子邮件＆＃34;：＆＃34; elvin.anonymous@gmail.com"}，{＆＃34;姓名＆＃34;：＆＃34;花式＆＃34;＆＃34;姓＆＃34;：＆＃34;匿名＆＃34;＆＃34; DATEOFBIRTH＆＃34;：＆＃34; 1990年2月1日和＃34;＆＃34;电话＆＃34;：＆＃34; 001-100-200-3006＆＃34;＆＃34;电子邮件＆＃34;：＆＃34; fancy.anonymous@gmail.com"}，{＆＃34;＆姓＃34;：＆＃34;格雷格＆＃34;＆＃34;姓＆＃34;：＆＃34;匿名＆＃34;＆＃34; DATEOFBIRTH＆＃34;：＆＃34; 1984年1月9日＆＃ 34;＆＃34;电话＆＃34;：＆＃34; 001-100-200-3007＆＃34;＆＃34;电子邮件＆＃34;：＆＃34; greg.anonymous@gmail.com" }，{＆＃34;姓名＆＃34;：＆＃34;哈利＆＃34;＆＃34;姓＆＃34;：＆＃34;匿名＆＃34;＆＃34; DATEOFBIRTH＆＃34;：＆＃ 34，1989年11月10日＆＃34;＆＃34;电话＆＃34;：＆＃34; 001-100-200-3008＆＃34;＆＃34;电子邮件＆＃34;：＆＃34;哈利。 anonymous@gmail.com"}，{＆＃34;姓名＆＃34;：＆＃34;三宅＆＃34;＆＃34;姓＆＃34;：＆＃34;匿名＆＃34;＆＃34 ;出生日期＆＃34;：＆＃34; 1950年1月1日＆＃34;＆＃34;电话＆＃34;：＆＃34; 001-100-200-3009＆＃34;＆＃34;电子邮件＆＃34 ;：＆＃34; issey.anonymous@gmail.com"}，{＆＃34;姓名＆＃34;：＆＃34;杰克＆＃34;＆＃34;姓＆＃34;：＆＃34; Anonymo我们＆＃34;＆＃34;出生日期＆＃34;：＆＃34; 1970年10月1日＆＃34;＆＃34;电话＆＃34;：＆＃34; 001-100-200-3010＆＃34; ＆＃34;电子邮件＆＃34;：＆＃34; jack.anonymous@gmail.com"}]

为了将结果拆分为jQuery自动完成兼容，我将客户端js更改为此以将传入的JSON映射到label和value或id（同时尝试{{} 1}}和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 };
             }));
        }
    });
},
});

现在，我的自动完成框没有显示（它不是空的 - 根本没有显示（我可以看到调试器和服务器上的服务器发生了Ajax交互））。我在Chrome中这样做，所以我启动了调试器，我看到从服务器正确返回了JSON。我需要什么样的HTML / CSS魔法来确保我的搜索结果出现？

我在哪里可以找到关于jQuery网站的文档（jQuery自动完成主网站 - 文档没有谈论标签或价值，当然也没有谈论正确的div元素来操纵）。

顺便说一句，对于将元组返回到

<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" />

调用中的response的正确方法，是逗号还是分号的分隔符？ Chrome给了我一个错误map，当我将元组中的分隔符更改为分号时，它才会消失。

Answer 1

哇。我对JS的令人难以置信的语法感到敬畏。无论如何，关键问题是使用return语句{..}括号。对于像我这样的JS noob，这是无数个小时试图掌握JS语法背后的任何逻辑以及在return语句中使用K＆amp; 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-indenters的人，我建议使用以下语法，即Allman缩进友好：

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

对SO帖子here和here特别大喊。关于此事的更好的帖子和策划的（？）意见here。

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

jQuery自动完成结果框不显示转换为`label`＆amp;的JSON流`value`

1 个答案: