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，你对这个插件做了一些错误;

首先，您的插件使用不正确; options在一个对象中指定，数据集在另一个对象中指定：

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

为了解释上述内容，建议＆＃39; key是＆＃39;模板的一个孩子。关键，它不存在独立。来源＆＃39; key是一个函数，而不是一个数组。该函数通过查询，并且回调＆＃39;函数，然后以数据作为参数执行。

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

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

1 个答案: