如何添加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");
    }
  }
});

当我在搜索框中按不同的键时，我可以看到keyup的值，所以我知道事件被击中了。捕获"回车"键也可以，但按下回车键会导致回车站点重新加载，当我这样做时：

Session.get("searchQuery")

它返回undefined。

我不知道我是否处理得当。本质上，我只想从搜索框中获取值，然后使用该值对我的收藏进行搜索。任何帮助都将不胜感激！非常感谢。

Answer 1

您应该为搜索表单使用提交按钮，以避免破坏可访问性。默认情况下，使用提交按钮还将启用您要查找的行为：按下回车键时提交表单。如果你真的想去掉提交按钮，把它保留在DOM中，但用CSS隐藏它

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

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

Answer 2

可能发生的情况是，当您点击回车键时，您的表单正在提交。尝试preventDefault()。也许这样的东西会起作用：

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");
     }
   },
   'submit form': function (evt) {
      evt.preventDefault();
   }
 ...

你也可以尝试在你的keyup中添加evt.preventDefault();，但我认为这是表单提交的结果

如果有人在这里尝试实现搜索功能，我建议如下：

meteor add matteodem:easy-search

在客户端和服务器上：

Players = new Meteor.Collection('players');
// name is the field of the documents to search over
Players.initEasySearch('name');

在客户端上，制作template.html:

<template name="searchBox">
    {{> esInput index="players" placeholder="Search..." }}
    <ul>
        {{#esEach index="players"}}
            <li>Name of the player: {{name}}</li>
        {{/esEach}}
    </ul>
</template>

参考