Close Mobile Keyboard & Menu on Return

It's nice using Algolia for realtime search right on the page, but it created a slight problem for mobile visitors. Upon hitting Return, nothing seems to happen, because the search results are live right under the menu. The screen is covered by the menu and mobile keyboard. The solution is to listen for the keyup event and when the Return is hit, blur out of the search input to hide the keyboard and collapse the menu, to reveal the results:

$(document).on('keyup', '.algolia__input', function(e) {
  if(e.keyCode == 13) {
      $("input").blur();
      Foundation.libs.topbar.toggle();
  }
});

Using Zurb Foundation, it’s easy to call .toggle() on the topbar to hide the menu. Obviously, if you’re using something else than Foundation, you’ll have to figure out how to close out the menu. In Twitter Bootstrap, I believe that you can do something like this:

$('.navbar-toggle').click();

Search

🔎 Searching...