Typeahead.js 未显示预取数据的自定义模板

Question

我正在使用 Twitter 的 typeahead.js 来显示自动完成。

我的代码如下：

$.ajax({
    url:'/getlocals/',
    success: function(data){
        $('.local-type').typeahead({
            name: 'local-tt',
            source: data,
            suggestion: Handlebars.compile('<p><strong>{{locality}}</strong> – {{city}}</p>')
        })
    }
});

其中数据是来自 /getlocals/ 的 json 响应，格式如下：

[{
"locality": "Powai",
"city": "Mumbai",
}, {
"locality": "Colaba",
"city": "Mumbai",
}, {
"locality": "Andheri East",
"city": "Mumbai",
}, {
"locality": "Andheri West",
"city": "Mumbai",
}]

但是这不起作用，我感觉 source 选项没有收到正确的格式。 typeahead 需要什么样的格式？我该如何提供？

编辑：

我也使用了此处提供的部分解决方案：Twitter Bootstrap Typeahead - Id & Label 但这似乎对我不起作用。

Answer 1

据我所知，阅读 documentation，你在这个插件上做错了一些事情；

第一，您的插件使用方式不正确；选项在一个对象中指定，数据集在另一个对象中指定：

$('.local-type').typeahead({/*options*/}, {/*data set1*/}, {/*optional data set 2*/});

对于您的示例，它应该是这样的：

$('.local-type').typeahead({
    name: 'local-tt',
}, {
    source: function (query, cb) {
        cb(data);
    },
    templates: {
        suggestion: Handlebars.compile('<p><strong>{{locality}}</strong> – {{city}}</p>')
    }
});

为了解释以上内容，'suggestion' 键是 'templates' 键的子项，它不单独存在。 'source' 键是一个函数，而不是数组。该函数传递查询和 'callback' 函数，然后以数据作为参数执行该函数。

其次，假设 ajax 调用被执行多次，您在 ajax 调用中创建 typeahead 插件实例的方法不是首选。如果不是，则忽略以下建议，即在 typeahead 插件创建中放置 ajax 调用，例如：

$('.local-type').typeahead({
    name: 'local-tt',
}, {
    source: function (query, cb) {
        $.ajax({
            url:'/getlocals/',
            success: function(data){
                cb(data);
            }
        });
    },
    templates: {
        empty: [
            '<div class="empty-message">',
            'unable to find any Best Picture winners that match the current query',
            '</div>'].join('\n'),
        suggestion: Handlebars.compile('<p><strong>{{locality}}</strong> – {{city}}</p>')
    }
});

这当然是假设 ajax 请求不止一次；如果不是，请忽略上述内容。

Basic demo

Typeahead.js 未显示预取数据的自定义模板

Typeahead.js not showing custom template for prefetched data

javascript

jquery

typeahead.js