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>')
        })
    }
});

其中 data 是来自/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>')
    }
});

为了解释上述内容，“建议”键是“模板”键的子项，它不独立存在。 'source' 键是一个函数，而不是一个数组。该函数被传递给查询和“回调”函数，然后以数据作为参数执行。

其次，如果 ajax 调用执行了多次，那么在 ajax 调用中创建预输入插件实例的方法不是首选方法。如果不是，则忽略以下建议，即将 ajax 调用放在 typeahead 插件创建中，如下所示：

$('.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