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

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

其次，您在 ajax 调用中创建 typeahead 插件实例的方法不是首选，假设 ajax 调用被执行多次。如果不是，则忽略以下建议，即在 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