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

我正在使用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>')
        })
    }
});

但是，这不起作用，我感觉

源代码
选项没有收到正确的格式。
typeahead
正在寻找哪种格式，如何提供

编辑：

我也使用了这里提供的部分解决方案：但这似乎对我不起作用
 据我所知，在阅读文章时，你对这个插件做了一些错误的事情

首先，你的插件使用不正确；选项在一个对象中指定，数据集在另一个对象中指定：

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

$（'.local-type'）。typeahead({
名称：‘本地tt’，
}, {
来源：函数（查询，cb）{
cb（数据）；
},
模板：{
建议：车把。编译（“{{{locality}-{{city}}
”）
}
});

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

其次，如果ajax调用被多次执行，那么在ajax调用中创建typeahead插件实例的方法就不是首选方法。如果不是，那么忽略以下建议，即将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>')
    }
});

$（'.local-type'）。typeahead({
名称：‘本地tt’，
}, {
来源：函数（查询，cb）{
$.ajax({
url:“/getlocals/”，
成功：功能（数据）{
cb（数据）；
}
});
},
模板：{
空的：[
'',
“找不到任何与当前查询匹配的最佳图片获奖者”，
''。连接（'\n'），
建议：车把。编译（“{{{locality}-{{city}}
”）
}
});

这当然是假设ajax请求被多次提出；如果不是，则忽略上述内容

@Daedalus抱歉，这是我在没有从响应中复制结构的情况下编写的。我已经编辑好了。谢谢；注释已删除，因为它现在已过时。@Daedalus确定。有什么建议可以解决这个问题吗？我正在使用Django发送
数据
变量，如果这有什么区别的话。目前正在重新创建的环境中调试您的问题。请参阅，谢谢！与评论中的解决方案相比，我更喜欢这个解决方案。您已经很好地解释了这一点，现在我明白了为什么我的代码不起作用+1@Newtt很乐意帮忙。
$('.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>')
    }
});