Question

据我了解，typeahead.js有三种获取数据的方式。

本地：硬编码数据
预取：加载本地json文件或URL
远程：向后端发送查询，并以匹配结果作出响应

我想从后端获取所有数据然后在客户端处理它。我的服务器响应的数据具有以下结构：

[{id:2, courseCode:IDA530, courseName:Software Testing, university:Lund University},
{id:1, courseCode:IDA321, courseName:Computer Security, university:Uppsala University}, ...]

我希望它能够搜索每个条目中的所有字段。（id，courseCode，courseName，university）

我想在客户端上做更多的事情并且仍然为每个用户取一次（而不是每次用户输入），我可能在这里误解了一些东西，但请纠正我。

Answer 1

您应该重新阅读文档。基本上你需要两件事：

使用prefetch:对象将后端的所有数据仅提供给客户端一次（如果我理解正确的话，那就是您要查找的内容。）
使用filter函数将这些结果转换为基准。返回的基准可以有tokens字段，该字段将是搜索到的类型，并且可以根据您的所有数据构建。

有些事情：

$('input.twitter-search').typeahead([{
    name: 'courses',
    prefetch: {
        url: '/url-path-to-server-ajax-that-returns-data',
        filter: function(data) {
            retval = [];
            for (var i = 0;  i < data.length;  i++) {
                retval.push({
                    value: data[i].courseCode,
                    tokens: [data[i].courseCode, data[i].courseName, data[i].university],
                    courseCode: data[i].courseCode,
                    courseName: data[i].courseName,
                    template: '<p>{{courseCode}} - {{courseName}}</p>',
                });
            }
            return retval;
        }
    }
}]);

Twitter typeahead.js远程并在客户端上搜索

1 个答案: