Twitter的typeahead.js遥控器和搜索客户端遥控器、客户端、Twitter、typeahead

2023-09-11 01:12:07 作者:今天小雨转甜

由于我的理解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:

使用了 prefetch:对象将所有的数据从后端到客户端只有一次(也就是你在找什么,如果我正确理解。)

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;
        }
    }
}]);