如何使用Meteor和Bootstrap添加搜索？

Question

我正在尝试在我的Meteor应用程序中实现搜索.我不完全理解它是如何联系在一起的.此时,我有以下代码:

HTML:

<form class="navbar-search pull-left">
  <input type="text" class="search-query" placeholder="Search">
</form>

JS:

Template.menubar.events({
  'keyup input.search-query': function (evt) {
    console.log("Keyup value: " + evt.which);
    if (evt.which === 13) {
      console.log("Got an Enter keyup");
      Session.set("searchQuery", "justATestVar");
    }
  }
});

当我按下不同的键进入搜索框时,我可以看到键盘的值,所以我知道事件正在被击中.捕获"输入"键盘也可以,但按Enter键会导致输入站点重新加载,当我这样做时:

Session.get("searchQuery")

它返回undefined.

我不知道我是否正确处理了这个问题.基本上,我只想从搜索框中获取值,然后使用该值对我的集合进行搜索.任何帮助,将不胜感激!谢谢.

Answer 1

您应该使用搜索表单的提交按钮,以避免破坏可访问性.默认情况下,使用提交按钮也会启用您要查找的行为:按下输入键时的表单提交.如果你真的想摆脱提交按钮,请将它保存在DOM中,但使用CSS来隐藏它.

对你将从"提交表单"处理程序收到的事件调用preventDefault非常重要,如果你忘记这样做,页面将刷新破坏流星"单页面应用程序"的体验(顺便说一句,页面刷新将清除你的Session变量,这就是为什么你首先得到一个未定义的值).

"submit form":function(event,template){
    event.preventDefault();
    Session.set("searchQuery",template.find(".search-query").value);
}