Twitter typeahead.js remote and search on client

问题:

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

• Local: hardcoded data
• Prefetch: Load a local json file, or by URL
• Remote: Send a query to the backend which responds with matching results

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}, ...]

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.

回答1:

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

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.)

2. 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.

Something along the lines of:

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