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:
-
使用了
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;
}
}
}]);
这篇关于Twitter的typeahead.js遥控器和搜索客户端的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!