Question

我正在尝试将twitter typeahead实现到我的项目中，将远程作为源。我能够在前端查询文本和sql之间建立连接。返回响应如下所示：

[
 {
    id: 1,
    name: 'user one'
 },
 {
   id: 2,
   name: 'user two'
 }
 ..
]

typeahead显示匹配的项目，但它包含id以及选择中的名称，而不仅仅是名称。其次，我想在select上获取id值，但是：select总是给出名称值而不是id。

这是我的代码：

           var source = new Bloodhound({
                datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
                queryTokenizer: Bloodhound.tokenizers.whitespace,
                remote: {
                    url:"{{ path('user_typeahead') }}"+'?string=%QUERY', // twig path
                    wildcard: '%QUERY',
                    filter: function (results) {
                        // Map the remote source JSON array to a JavaScript object array

                        return $.map(results, function (result) {
                            return {
                                value: result
                            };
                        });
                    }
                }
            });
            // Initialize the Bloodhound suggestion engine
            source.initialize();

            $('#typeahead').typeahead(null, {
                   display: 'value',
                   source: source.ttAdapter(),
                   limit:5,
                   highlight: true,
                   hint: true
                });

            $('#typeahead').bind('typeahead:select', function(ev, suggestion) {
                console.log(suggestion);
            });

Answer 1

试试这个，

应将显示设置为json对象的属性。 display: 'id'
链接自定义事件。从suggestion.id.
访问您的ID
$('#typeahead').typeahead(null, { display: 'id', source: source.ttAdapter(), limit:5, highlight: true, hint: true }).bind('typeahead:select', function(ev, suggestion) { console.log(suggestion); });

在Twitter Typeahead上选择显示名称并选择ID

1 个答案: