Twitter的typeahead.js遥控器和搜索客户端 [英] Twitter typeahead.js remote and search on client

问题描述

由于我的理解typeahead.js有三种方式获取数据。

As of my understanding typeahead.js got three ways of fetching data.

• 本地：硬codeD数据
• prefetch：加载本地JSON文件，或通过网址
• 远程发送一条查询到响应的匹配结果后端

我想获取从后端然后将所有数据    在客户端上进行处理。 我的服务器得到了以下结构的响应数据：

I want to fetch all data from the backend and then process it on the client. The data my server responds with got the following structure:

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

我希望它搜索的每个条目的所有字段。 （ID，当然code，课程名，大学）

I want it to search on all fields in each entry. (id, courseCode, courseName, university)

我想要做的更多的客户端上，仍然取一次为每个用户（而不是每一个用户在打字时），我可能误解了一些东西在这里，但请大家指正。

I wanna do more on the client and still fetching one time for each user (instead of every time a user are typing), I probably misunderstood something here but please correct me.

推荐答案

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

You should re-read the docs. Basically there are two things you need:

1. 使用了 prefetch：对象将所有的数据从后端到客户端只有一次（也就是你在找什么，如果我正确理解。）

1. Use the prefetch: object to bring all the data from the backend to the client only once (that's what you are looking for, if I understand correctly.)

使用过滤器函数来改变这些结果为基准。返回的基准可以有一个标记字段，这将是怎样预输入搜查，并可以从所有数据构建的。

Use a filter function to transform those results into datums. The returned datums can have a tokens field, which will be what typeahead searched by, and can be built from all your data.

线沿线的东西：

$('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遥控器和搜索客户端的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！