当前位置 : 主页 > 网页制作 > Bootstarp >

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

来源:互联网 收集:自由互联 发布时间:2021-06-12
我正在尝试在我的Meteor应用程序中实现搜索.我不完全理解它是如何联系在一起的.此时,我有以下代码: HTML: form class="navbar-search pull-left" input type="text" class="search-query" placeholder="Search"
我正在尝试在我的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();在你的密钥,但我认为这是表单提交正在做的.

网友评论