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

发布时间：2020-12-17 20:39:52 所属栏目：安全来源：网络整理

导读：我正在尝试在我的Meteor应用程序中实现搜索.我不完全理解它是如何联系在一起的.此时,我有以下代码： HTML： form class="navbar-search pull-left" input type="text" class="search-query" placeholder="Search"/form JS： Template.menubar.events({ 'keyu

我正在尝试在我的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.

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

解决方法

可能发生的是你输入时提交的表单.尝试一下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();在你的密钥,但我认为这是表单提交正在做的.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!