How to add Search with Meteor and Bootstrap?

Question

I am trying to implement searching in my Meteor app. I don't exactly understand how it ties together. At this point, I have this following code:

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");
    }
  }
});

I can see the values of keyup as I press different keys into the search box, so I know the event is being hit. Capturing the "enter" keyup also works, but pressing enter causes the enter site to reload and when I do:

Session.get("searchQuery")

it returns undefined.

I don't know if I'm handling this properly. Essentially, I just want to get the value from the search box and then use that value for making a search on my collection. Any help would be appreciated! Thank you.

Answer 1

You should really use a submit button for your search form to avoid ruining accessibility. Using a submit button will also enable by default the behavior you're looking for : form submission on enter key pressed. If you really want to get rid of the submit button, keep it in the DOM but use CSS to hide it.

It's very important to call preventDefault on the event you'll receive from "submit form" handler, if you forget to do so, the page will refresh ruining the meteor "Single Page App" experience (and by the way, page refresh will clear your Session variables, which is why you get an undefined value in the first place).

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