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

据我所知，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，课程代码，课程名称，大学）

---

我想在客户端上做更多的工作，但仍然为每个用户获取一次（而不是每次用户键入），我可能误解了这里的某些内容，但请纠正我。

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

使用

prefetch:

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

使用

过滤器

功能将这些结果转换为基准。返回的基准可以有一个

tokens

字段，这将是typeahead搜索的依据，并且可以从您的所有数据中构建

大致如下：

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

$（'input.twitter search'）。提前键入([{
名称：'课程'，
预取：{
url:“/url指向返回数据的服务器ajax的路径”，
过滤器：功能（数据）{
retval=[]；
对于（变量i=0；i”，
});
}
返回返回；
}
}
}]);

谢谢！这段很棒的代码片段，给我带来了不少惊喜。以前尝试过预回迁，但没有成功。我只是将“inti”改为“vari”，并在for循环之后返回retval，它就工作了！欢迎：）啊。对的我还是有点习惯用“c”，打这个“盲”。我将编辑回复。好的，当我更深入地研究它时，我认识到一些我需要改变的事情。它有时不起作用的原因是我在chrome的匿名窗口中，可能本地存储被关闭了。我还必须添加一个模板引擎，比如“engine:Hogan”。我还将“template:'{{courseCode}}-{courseName}

'”从过滤器中移出并添加了.join（“”），“从一开始，我真正想要的是在每次页面加载（或者在本地数据中没有找到点击）而不是每次按键时加载数据一次。现在，即使我刷新了页面，它也没有更新我的数据，因此如果添加了新课程，用户将永远无法识别它。但是，我在文档就绪函数中添加了“localStorage.clear（）；”。这就解决了这个问题，但我更愿意让它重新加载数据，如果它在键入时找不到它。也许我可以用遥控器？我明天会看的，现在该睡觉了。@nilsi:每页加载一次正是

预取的目的。如果不指定
名称：“课程”
（即：根本不指定名称），则不会将其保存在本地存储中，并且每次重新加载页面时都会得到所有更新。