Add autofocus for the searchbar

lib/boot/boot.js

@@ -33,6 +33,7 @@ page('*', function(ctx, next){
 
 page('/', function(){
   var search = new Search;
+  search.bindAutofocus(document);
   content.className = 'index';
   content.appendChild(search.show());
 })

lib/search/component.json

@@ -5,7 +5,8 @@
   "dependencies": {
     "visionmedia/superagent": "0.11.0",
     "component/domify": "*",
-    "component/reactive": "0.7.1"
+    "component/reactive": "0.7.1",
+    "component/event": "*"
   },
   "scripts": ["search.js"],
   "styles": ["search.styl"],

lib/search/search.js

@@ -8,6 +8,7 @@ var List = require('list')
   , request = require('superagent')
   , reactive = require('reactive')
   , domify = require('domify')
+  , events = require('event')
   , tmpl = require('./template')
 
 /**
@@ -25,10 +26,32 @@ module.exports = SearchView;
 function SearchView() {
   this.el = domify(tmpl)[0];
   this.view = reactive(this.el, {}, this);
+  this.searchbar = this.el.querySelector("input");
   this.list = new List;
   this.el.appendChild(this.list.el);
 }
 
+/**
+ * Bind the autofocus listener to an element (document).
+ */
+
+SearchView.prototype.bindAutofocus = function(el){
+  var self = this;
+
+  events.bind(el, 'keydown', function(e){
+    if(/(input|select|textarea)/i.test(e.target.tagName)) return;
+    self.focus();
+  });
+};
+
+/**
+ * Focus the search bar.
+ */
+
+SearchView.prototype.focus = function(){
+  this.searchbar.focus();
+};
+
 /**
  * Handle input.
  */