Typeahead 建议，每个建议下方都有文字答案

【问题标题】：Typeahead suggestions with text below each suggestionTypeahead 建议，每个建议下方都有文字
【发布时间】：2017-10-17 19:07:51
【问题描述】：

我正在做一个用户有角色的项目。

我正在为这些字符创建一个搜索功能，用户在其中输入字符名称，然后可以搜索匹配的记录。

我在输入框中使用了预输入，目前正在返回字符名称及其用户名。

我想将其显示在建议列表中，并以正常显示的字符名称显示，然后将其下方的用户名显示为稍小的文本。像这样的：

为此，我尝试了以下方法

<script type="text/javascript">
    $(document).ready(function() {

        var characters = new Bloodhound({
            remote: {
                url: '/search/characters/find?q=%QUERY%',
                wildcard: '%QUERY%'
            },
            datumTokenizer: Bloodhound.tokenizers.whitespace('q'),
            queryTokenizer: Bloodhound.tokenizers.whitespace
        });

        $("#searchinput").typeahead({
            hint: true,
            highlight: true,
            minLength: 1
        },
        {
            source: characters.ttAdapter(),
            templates: {
                suggestion: Handlebars.compile('<p>@{{ concatname }}</p><p><small>@{{ username }}</small></p>')
            }
        });
    });
</script>

然而，这只显示建议中的角色名称。

为了测试数据是否正确输入，我尝试了这个并且它成功了（字符名称，然后是连字符，然后是用户名）：

suggestion: Handlebars.compile('<p>@{{ concatname }} - @{{ username }}</p>')

返回的数据示例如下：

[  
   {  
      concatname:"Great Work",
      username:"manager"
   },
   {  
      concatname:"Scrim Greaves",
      username:"glees"
   }
]

如何让用户名正确显示在角色名称下方？

注意@{{ }} 语法是必要的，因为我使用 Laravel，@ 符号转义双花括号，然后呈现为 {{ }}。

【问题讨论】：

你试过没有@吗？我对 Laravel 不太熟悉，但我认为 Handlebars 编译器不会通过 Laravel 解释器。
laravel 解释器在页面上将这些渲染为{{ }}，这发生在页面渲染时，甚至在 Handlebars 编译器运行之前。如果我在页面加载后查看页面源，我只会看到{{ }}。如果我不放@，那么 laravels 刀片引擎会将其解释为 php 变量并且页面不会加载。
啊，我没有注意到它在你的页面中都是内联的。

标签： javascript laravel laravel-5.2 handlebars.js typeahead.js

【解决方案1】：

请查看以下网站，有一个会员搜索栏，我在 Laravel 中使用 typeahead，我也在注册页面中使用它..

Click here

【讨论】：

【解决方案2】：

我认为您遇到的问题是您的 to <p> 元素没有包装器。模板应该有一个包含所有内容的元素，并且很可能会修剪第二个 <p>。

更改您的模板代码：

templates: {
  suggestion: Handlebars.compile('<div><p>@{{ concatname }}</p><p><small>@{{ username }}</small></p></div>')
}

【讨论】：

你是对的！它只需要 <div> 包装器就可以完美运行。