Question

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

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

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

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

为此，我尝试了以下

<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

请检查以下网站，有一个memeber搜索栏，Iam使用Laravel的typeahead，我也在注册页面使用它。

Click here

在每个建议下方提供带有文字的预先建议

2 个答案: