Twitter typeahead.js 远程和客户端搜索

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, 大学)

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

Answer 1

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

1. 使用prefetch: 对象仅将所有数据从后端带到客户端一次（如果我理解正确，这就是您要查找的内容。）

2. 使用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;
        }
    }
}]);