如何在 twitter typeahead/bloodhound 的建议中显示多个返回值？

Question

我正在尝试使用 bloodhound 和 typeahead 创建自动完成功能。数据正在正确返回，但在选项中显示为 undefined 我的代码是：

HTML：

<form class="typeahead" role="search">
       <div class="form-group">
            <input type="search" name="q" class="form-control search-input" placeholder="Search" autocomplete="off">
       </div>
</form>

Javascript：

var engine = new Bloodhound({
                remote: {
                    url: '{{ route('search') }}?query=%QUERY',
                    wildcard: '%QUERY'
                },
                datumTokenizer: Bloodhound.tokenizers.whitespace('name'),
                queryTokenizer: Bloodhound.tokenizers.whitespace
            });

            $(".search-input").typeahead({
                hint: true,
                highlight: true,
                minLength: 1
            }, {
                source: engine.ttAdapter(),

                // This will be appended to "tt-dataset-" to form the class name of the suggestion menu.
                name: 'profileList',

                // the key from the array we want to display (name,slug...)
                templates: {
                    empty: [
                        '<div class="list-group search-results-dropdown"><div class="list-group-item">Nothing found.</div></div>'
                    ],
                    header: [
                        '<div class="list-group search-results-dropdown">'
                    ],
                    suggestion: function (data) {
                        var profile = [];
                        profile.push(data);
                        console.log(profile);

                        return '<a href="' + data.slug + '" class="list-group-item">' + data.name + '</a>'
                    }
                }
            });

当我console.log(data) 时，我得到 2 个如下所示的结果：

Hello Molly
hello-molly-436057803095647

但值显示为undefined。后端返回的数据如下：

{"name":"Hello Molly","slug":"hello-molly-436057803095647"}

我想像这样显示name 和slug：return '<a href="' + data.slug + '" class="list-group-item">' + data.name + '</a>' 作为建议。我该怎么做？

Answer 1

对于其他卡住的人，我必须创建一个转换函数：

transform: function(response) {
                    return $.map(response, function (profile) {
                        return {
                            name: profile.name,
                            slug: profile.slug
                        }
                    });
                },

映射出 json 响应。此外，如果您使用大量浏览器缓存清除缓存，因为这可能会阻止 javascript 更新。

完整代码：

var engine = new Bloodhound({
                remote: {
                    url: '{{ route('search') }}?query=%QUERY',
                    wildcard: '%QUERY',
                    transform: function(response) {
                        return $.map(response, function (profile) {
                            return {
                                name: profile.name,
                                slug: profile.slug
                            }
                        });
                    },
                },
                datumTokenizer: Bloodhound.tokenizers.whitespace('name', 'slug'),
                queryTokenizer: Bloodhound.tokenizers.whitespace

            });

            engine.initialize();

            $(".search-input").typeahead({
                hint: true,
                highlight: true,
                minLength: 1,
                displayKey: 'name',
            }, {
                source: engine.ttAdapter(),

                // This will be appended to "tt-dataset-" to form the class name of the suggestion menu.
                name: 'profileList',

                // the key from the array we want to display (name,id,email,etc...)
                templates: {
                    empty: [
                        '<div class="list-group search-results-dropdown"><div class="list-group-item">Nothing found.</div></div>'
                    ],
                    header: [
                        '<div class="list-group search-results-dropdown">'
                    ],
                    suggestion: function (data) {
                        return '<a href="' + data.slug + '" class="list-group-item">' + data.name + '</a>'
                    }
                }
            });