4

我正在尝试在我的 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 的值，所以我知道该事件正在被击中。捕获“enter”键也可以，但是按 enter 会导致 enter 站点重新加载，当我这样做时：

Session.get("searchQuery")

它返回未定义。

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

4

3 回答 3

7

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

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

"submit form":function(event,template){
    event.preventDefault();
    Session.set("searchQuery",template.find(".search-query").value);
}
于 2013-06-28T08:10:11.950 回答
2

可能发生的情况是当您按 Enter 时正在提交您的表单。尝试一个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();
   }
 ...

您也可以尝试添加evt.preventDefault();您的 keyup，但我认为这是表单提交。

于 2013-06-28T07:40:33.547 回答
2

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

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>

参考

于 2015-03-09T09:22:54.117 回答