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

Question

我正在开发一个用户拥有 Angular 色的项目。

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

我在输入框中使用预先输入功能，目前正在恢复 Angular 色名称及其用户名。

我想在建议列表中显示它，并像平常一样显示 Angular 色名称，然后将其下面的用户名显示为稍小的文本。 像这样的事情:

为此，我尝试了以下方法

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

但是这仅显示建议中的 Angular 色名称。

为了测试数据是否正确输入，我尝试了这个并且它有效(字符名称，然后是连字符，然后是用户名):

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

返回的数据示例如下:

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

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

请注意，当我使用 Laravel 时，@{{ }} 语法是必需的，并且 @ 符号转义双大括号，然后呈现为 ​​{ { }}。

Answer 1

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

更改您的模板代码:

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