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的值，因为我在搜索框中按了不同的键，所以我知道事件正在被击中。捕获“输入”键盘也有效，但按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);
}

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();
   }
 ...

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

Answer 3

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

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>

Reference

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

3 个答案: