simulate tabbing away from select2 project search

app/views/layouts/base.rhtml

@@ -21,6 +21,7 @@
 <%= javascript_include_tag 'jquery.menu_expand.js' %>
 <%= javascript_include_tag 'breadcrumb.js' %>
 <%= javascript_include_tag 'select2.js' %>
+<%= javascript_include_tag 'findDomElement.js' %>
 <%= stylesheet_link_tag 'select2'%>
 <%= stylesheet_link_tag 'project_select_select2'%>
 

public/javascripts/application.js

@@ -500,7 +500,7 @@ jQuery.viewportHeight = function() {
 jQuery(document).ready(function($) {
 
   $('#project-search-container select.select2-select').each(function (ix, select) {
-    var parent, select2Container, results;
+    var parent, select2Container, results, input;
     parent = $(select).parents('li.drop-down');
     // deselect all options
     $(select).find(":selected").each(function (ix, option) {
@@ -515,8 +515,28 @@ jQuery(document).ready(function($) {
     results = parent.find("div.select2-container").data("select2").dropdown;
     results.attr("id", "project-search-results");
 
+    input = results.find("input.select2-input");
+    $.each(input.data("events")["keydown"], function(i, handler) {
+      var old_handler = handler.handler;
+      handler.handler = function (e) {
+        var keyCode = e.keyCode || e.which;
+        if (keyCode == 9) {
+          closestVisible = results.data("select2").container.children(".select2-choice").closest(":visible");
+          if (e.shiftKey) {
+            closestVisible.previousElementInDom(":input:visible, a:visible").focus();
+          } else {
+            closestVisible.nextElementInDom(":input:visible, a:visible").focus();
+          }
+          e.stopPropagation();
+          e.preventDefault();
+        } else {
+          old_handler(e);
+        }
+      }
+    });
+
     // prevent menu from getting closed prematurely
-    jQuery('div.select2-search').click(function(event){
+    $('div.select2-search').click(function(event){
       event.stopPropagation();
     });
 

public/javascripts/findDomElement.js

@@ -0,0 +1,34 @@
+(function( $ ){
+  $.fn.nextElementInDom = function(selector, options) {
+    return $(this).findElementInDom(selector, $.extend(options, { direction: 'front' }));
+  };
+
+  $.fn.previousElementInDom = function(selector, options) {
+    return $(this).findElementInDom(selector, $.extend(options, { direction: 'back' }));
+  };
+
+  $.fn.findElementInDom = function(selector, options) {
+    var defaults, parent, direction, found, children;
+    defaults = { stopAt : 'body', direction: 'front' };
+    options = $.extend(defaults, options);
+
+    parent = $(this).parent();
+
+    direction = (options.direction === 'front') ? ":gt" : ":lt";
+    children = parent.children(direction + "(" + $(this).index() + ")");
+    children = (options.direction === 'front') ? children : children.reverse();
+
+    found = parent.children(direction + "(" + $(this).index() + ")").find(selector).filter(":first");
+
+    if (found.length > 0) {
+      return found;
+    } else {
+      if (parent.length === 0 || parent.is(options.stopAt)) {
+        return $([])
+      } else {
+        return parent.findElementInDom(selector, options);
+      }
+    }
+  };
+
+})( jQuery );