预先输入建议，每个建议下方都有文字

Question

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

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

我在输入框中使用预先输入，目前正在取回角色名称及其用户名。

我想在建议列表中以正常显示的角色名称显示此内容，然后将其下方的用户名显示为略小的文本。像这样：

为此，我尝试了以下方法

<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 并且 @ 符号转义双花括号，然后呈现为 {{ }}。

Answer 1

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

更改您的模板代码：

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

Answer 2

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

Click here

预先输入建议，每个建议下方都有文字

Typeahead suggestions with text below each suggestion

javascript

handlebars.js

laravel

typeahead.js

laravel-5.2