From e62d87966dcf1d396fa84ed43bbf2c70dc3f100f Mon Sep 17 00:00:00 2001
From: Curt Kirkhoff <curt.kirkhoff@audaxhealth.com>
Date: Wed, 23 May 2012 12:33:50 -0400
Subject: [PATCH 1/6] New feature: Key search on dropkick select boxes. When
 focus is on a select box, you can type a string of different letters, or a
 series of one letter to select the desired option only using your keyboard.
 This feature exists in most browsers by default on regular select boxes.

---
 jquery.dropkick-1.0.0.js | 796 +++++++++++++++++++++------------------
 1 file changed, 431 insertions(+), 365 deletions(-)
 mode change 100644 => 100755 jquery.dropkick-1.0.0.js

diff --git a/jquery.dropkick-1.0.0.js b/jquery.dropkick-1.0.0.js
old mode 100644
new mode 100755
index b8f75a5c..63c7e4e4
--- a/jquery.dropkick-1.0.0.js
+++ b/jquery.dropkick-1.0.0.js
@@ -6,401 +6,467 @@
  *
  * &copy; 2011 Jamie Lottering <http://github.com/JamieLottering>
  *                        <http://twitter.com/JamieLottering>
- * 
+ *
+ * Bug fixes by owenallenaz
+ * https://github.com/owenallenaz/DropKick
+ *
+ * 'Key Search' update by Curt Kirkhoff
+ * https://github.com/kirkhoff/DropKick
  */
 (function ($, window, document) {
 
-  var ie6 = false;
-
-  // Help prevent flashes of unstyled content
-  if ($.browser.msie && $.browser.version.substr(0, 1) < 7) {
-    ie6 = true;
-  }
-  
-  var
-    // Public methods exposed to $.fn.dropkick()
-    methods = {},
-
-    // Cache every <select> element that gets dropkicked
-    lists   = [],
-
-    // Convenience keys for keyboard navigation
-    keyMap = {
-      'left'  : 37,
-      'up'    : 38,
-      'right' : 39,
-      'down'  : 40,
-      'enter' : 13
-    },
-
-    // HTML template for the dropdowns
-    dropdownTemplate = [
-      '<div class="dk_container" id="dk_container_{{ id }}" tabindex="{{ tabindex }}">',
-        '<a class="dk_toggle">',
-          '<span class="dk_label">{{ label }}</span>',
-        '</a>',
-        '<div class="dk_options">',
-          '<ul class="dk_options_inner">',
-          '</ul>',
-        '</div>',
-      '</div>'
-    ].join(''),
-
-    // HTML template for dropdown options
-    optionTemplate = '<li class="{{ current }}"><a data-dk-dropdown-value="{{ value }}">{{ text }}</a></li>',
-
-    // Some nice default values
-    defaults = {
-      startSpeed : 1000,  // I recommend a high value here, I feel it makes the changes less noticeable to the user
-      theme  : false,
-      change : false
-    },
-
-    // Make sure we only bind keydown on the document once
-    keysBound = false
-  ;
-
-  // Called by using $('foo').dropkick();
-  methods.init = function (settings) {
-    settings = $.extend({}, defaults, settings);
-
-    return this.each(function () {
-      var
-        // The current <select> element
-        $select = $(this),
-
-        // Store a reference to the originally selected <option> element
-        $original = $select.find(':selected').first(),
-
-        // Save all of the <option> elements
-        $options = $select.find('option'),
-
-        // We store lots of great stuff using jQuery data
-        data = $select.data('dropkick') || {},
-
-        // This gets applied to the 'dk_container' element
-        id = $select.attr('id') || lists.length,
-
-        // This gets updated to be equal to the longest <option> element
-        width  = settings.width || $select.outerWidth(),
-
-        // Check if we have a tabindex set or not
-        tabindex  = $select.attr('tabindex') ? $select.attr('tabindex') : '',
-
-        // The completed dk_container element
-        $dk = false,
-
-        theme
-      ;
-
-      // Dont do anything if we've already setup dropkick on this element
-      if (data.loaded) {
-        return $select;
-      } else {
-        data.settings  = settings;
-        data.tabindex  = tabindex;
-        data.id        = id;
-        data.$original = $original;
-        data.$select   = $select;
-        data.value     = _notBlank($select.val()) || _notBlank($original.attr('value'));
-        data.label     = $original.text();
-        data.options   = $options;
-		data.loaded    = true;
-      }
-
-      // Build the dropdown HTML
-      $dk = _build(dropdownTemplate, data);
-
-      // Make the dropdown fixed width if desired
-      $dk.find('.dk_toggle').css({
-        'width' : width + 'px'
-      });
-
-      // Hide the <select> list and place our new one in front of it
-      $select.before($dk);
-
-      // Update the reference to $dk
-	  $dk = $dk.fadeIn(settings.startSpeed);
-	  
-      // Save the current theme
-      theme = settings.theme ? settings.theme : 'default';
-      $dk.addClass('dk_theme_' + theme);
-      data.theme = theme;
-
-      // Save the updated $dk reference into our data object
-      data.$dk = $dk;
-
-      // Save the dropkick data onto the <select> element
-      $select.data('dropkick', data);
-
-      // Do the same for the dropdown, but add a few helpers
-      $dk.data('dropkick', data);
-
-      lists[lists.length] = $select;
-
-      // Focus events
-      $dk.bind('focus.dropkick', function (e) {
-        $dk.addClass('dk_focus');
-      }).bind('blur.dropkick', function (e) {
-		/*** IE moves focus from the .dk_container to .dk_options on scroll bar click ***/
-		if ($(document.activeElement).closest($dk).length > 0) {
-			$dk.focus();
-			return false;
-		}
-        $dk.removeClass('dk_open dk_focus');
-      });
-
-      setTimeout(function () {
-        $select.hide();
-      }, 0);
-    });
-  };
+    var ie6 = false;
 
-  // Allows dynamic theme changes
-  methods.theme = function (newTheme) {
-    var
-      $select   = $(this),
-      list      = $select.data('dropkick'),
-      $dk       = list.$dk,
-      oldtheme  = 'dk_theme_' + list.theme
-    ;
-
-    $dk.removeClass(oldtheme).addClass('dk_theme_' + newTheme);
-
-    list.theme = newTheme;
-  };
-
-  // Reset all <selects and dropdowns in our lists array
-  methods.reset = function () {
-    for (var i = 0, l = lists.length; i < l; i++) {
-      var
-        listData  = lists[i].data('dropkick'),
-        $dk       = listData.$dk,
-        $current  = $dk.find('li').first()
-      ;
-
-      $dk.find('.dk_label').text(listData.label);
-      $dk.find('.dk_options_inner').animate({ scrollTop: 0 }, 0);
-
-      _setCurrent($current, $dk);
-      _updateFields($current, $dk, true);
+    // Help prevent flashes of unstyled content
+    if ($.browser.msie && $.browser.version.substr(0, 1) < 7) {
+        ie6 = true;
     }
-  };
-
-  // Expose the plugin
-  $.fn.dropkick = function (method) {
-    if (!ie6) {
-      if (methods[method]) {
-        return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
-      } else if (typeof method === 'object' || ! method) {
-        return methods.init.apply(this, arguments);
-      }
-    }
-  };
 
-  // private
-  function _handleKeyBoardNav(e, $dk) {
     var
-      code     = e.keyCode,
-      data     = $dk.data('dropkick'),
-      options  = $dk.find('.dk_options'),
-      open     = $dk.hasClass('dk_open'),
-      current  = $dk.find('.dk_option_current'),
-      first    = options.find('li').first(),
-      last     = options.find('li').last(),
-      next,
-      prev
-    ;
-
-    switch (code) {
-      case keyMap.enter:
-        if (open) {
-          _updateFields(current.find('a'), $dk);
-          _closeDropdown($dk);
-        } else {
-          _openDropdown($dk);
+        // Public methods exposed to $.fn.dropkick()
+        methods = {},
+
+        // Cache every <select> element that gets dropkicked
+        lists = [],
+
+        // Convenience keys for keyboard navigation
+        keyMap = {
+            'left':37,
+            'up':38,
+            'right':39,
+            'down':40,
+            'enter':13,
+            'space':32
+        },
+
+        // HTML template for the dropdowns
+        dropdownTemplate = [
+            '<div class="dk_container" id="dk_container_{{ id }}" tabindex="{{ tabindex }}">',
+            '<a class="dk_toggle">',
+            '<span class="dk_label">{{ label }}</span>',
+            '</a>',
+            '<div class="dk_options">',
+            '<ul class="dk_options_inner">',
+            '</ul>',
+            '</div>',
+            '</div>'
+        ].join(''),
+
+        // HTML template for dropdown options
+        optionTemplate = '<li class="{{ current }}"><a data-dk-dropdown-value="{{ value }}">{{ text }}</a></li>',
+
+        // Some nice default values
+        defaults = {
+            startSpeed:1000, // I recommend a high value here, I feel it makes the changes less noticeable to the user
+            theme:false,
+            change:false
         }
-        e.preventDefault();
-      break;
-
-      case keyMap.up:
-        prev = current.prev('li');
-        if (open) {
-          if (prev.length) {
-            _setCurrent(prev, $dk);
-          } else {
-            _setCurrent(last, $dk);
-          }
-        } else {
-          _openDropdown($dk);
+        ;
+
+    // Called by using $('foo').dropkick();
+    methods.init = function (settings) {
+        settings = $.extend({}, defaults, settings);
+
+        return this.each(function () {
+            var
+                // The current <select> element
+                $select = $(this),
+
+                // Store a reference to the originally selected <option> element
+                $original = $select.find(':selected').first(),
+
+                // Save all of the <option> elements
+                $options = $select.find('option'),
+
+                // We store lots of great stuff using jQuery data
+                data = $select.data('dropkick') || {},
+
+                // This gets applied to the 'dk_container' element
+                id = $select.attr('id') || lists.length,
+
+                // This gets updated to be equal to the longest <option> element
+                width = settings.width || $select.outerWidth(),
+
+                // Check if we have a tabindex set or not
+                tabindex = $select.attr('tabindex') ? $select.attr('tabindex') : '',
+
+                // The completed dk_container element
+                $dk = false,
+
+                theme
+                ;
+
+            // Dont do anything if we've already setup dropkick on this element
+            if (data.loaded) {
+                return $select;
+            } else {
+                data.settings = settings;
+                data.tabindex = tabindex;
+                data.id = id;
+                data.$original = $original;
+                data.$select = $select;
+                data.value = _notBlank($select.val()) || _notBlank($original.attr('value'));
+                data.label = $original.text();
+                data.options = $options;
+                data.loaded = true;
+            }
+
+            // Build the dropdown HTML
+            $dk = _build(dropdownTemplate, data);
+
+            // Make the dropdown fixed width if desired
+            $dk.find('.dk_toggle').css({
+                'width':width + 'px'
+            });
+
+            // Hide the <select> list and place our new one in front of it
+            $select.before($dk);
+
+            // Update the reference to $dk
+            $dk = $dk.fadeIn(settings.startSpeed);
+
+            // Save the current theme
+            theme = settings.theme ? settings.theme : 'default';
+            $dk.addClass('dk_theme_' + theme);
+            data.theme = theme;
+
+            // Save the updated $dk reference into our data object
+            data.$dk = $dk;
+
+            // Save the dropkick data onto the <select> element
+            $select.data('dropkick', data);
+
+            // Do the same for the dropdown, but add a few helpers
+            $dk.data('dropkick', data);
+
+            lists[lists.length] = $select;
+
+            // Focus events
+            $dk.bind('focus.dropkick',function (e) {
+                $dk.addClass('dk_focus');
+            }).bind('blur.dropkick', function (e) {
+                    /*** IE moves focus from the .dk_container to .dk_options on scroll bar click ***/
+                    if ($(document.activeElement).closest($dk).length > 0) {
+                        $dk.focus();
+                        return false;
+                    }
+                    $dk.removeClass('dk_open dk_focus');
+                });
+
+            setTimeout(function () {
+                $select.hide();
+            }, 0);
+
+            $.fn.dropkick.keySearchTimeout = setTimeout(function () {
+                $.fn.dropkick.searchStr = '';
+            }, 500);
+        });
+    };
+
+    // Allows dynamic theme changes
+    methods.theme = function (newTheme) {
+        var
+            $select = $(this),
+            list = $select.data('dropkick'),
+            $dk = list.$dk,
+            oldtheme = 'dk_theme_' + list.theme
+            ;
+
+        $dk.removeClass(oldtheme).addClass('dk_theme_' + newTheme);
+
+        list.theme = newTheme;
+    };
+
+    // Reset all <selects and dropdowns in our lists array
+    methods.reset = function () {
+        for (var i = 0, l = lists.length; i < l; i++) {
+            var
+                listData = lists[i].data('dropkick'),
+                $dk = listData.$dk,
+                $current = $dk.find('li').first()
+                ;
+
+            $dk.find('.dk_label').text(listData.label);
+            $dk.find('.dk_options_inner').animate({ scrollTop:0 }, 0);
+
+            _setCurrent($current, $dk);
+            _updateFields($current, $dk, true);
         }
-        e.preventDefault();
-      break;
-
-      case keyMap.down:
-        if (open) {
-          next = current.next('li').first();
-          if (next.length) {
-            _setCurrent(next, $dk);
-          } else {
-            _setCurrent(first, $dk);
-          }
+    };
+
+    // Expose the plugin
+    $.fn.dropkick = function (method) {
+        if (!ie6) {
+            if (methods[method]) {
+                return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
+            } else if (typeof method === 'object' || !method) {
+                return methods.init.apply(this, arguments);
+            }
+        }
+    };
+
+    // private
+    function checkRange (x, n, m) {
+        if (x >= n && x <= m) {
+            return x;
         } else {
-          _openDropdown($dk);
+            return !x;
         }
-        e.preventDefault();
-      break;
+    }
 
-      default:
-      break;
+    // private
+    function _handleKeyBoardNav(e, $dk) {
+        var
+            code = e.keyCode,
+            data = $dk.data('dropkick'),
+            options = $dk.find('.dk_options'),
+            open = $dk.hasClass('dk_open'),
+            current = $dk.find('.dk_option_current'),
+            ul = options.find('.dk_options_inner'),
+            first = options.find('li').first(),
+            last = options.find('li').last(),
+            next,
+            prev,
+            codeChar,
+            searchArr,
+            currentIndex,
+            currentLink
+            ;
+
+        switch (code) {
+            case keyMap.space:
+            case keyMap.enter:
+                if (open) {
+                    _updateFields(current.find('a'), $dk);
+                    _closeDropdown($dk);
+                } else {
+                    _openDropdown($dk);
+                }
+                e.preventDefault();
+                break;
+
+            case keyMap.up:
+                prev = current.prev('li');
+                console.log(prev);
+                if (open) {
+                    if (prev.length) {
+                        _setCurrent(prev, $dk);
+                    } else {
+                        _setCurrent(last, $dk);
+                    }
+                } else {
+                    _openDropdown($dk);
+                }
+                e.preventDefault();
+                break;
+
+            case keyMap.down:
+                if (open) {
+                    next = current.next('li').first();
+                    if (next.length) {
+                        _setCurrent(next, $dk);
+                    } else {
+                        _setCurrent(first, $dk);
+                    }
+                } else {
+                    _openDropdown($dk);
+                }
+                e.preventDefault();
+                break;
+
+            case checkRange(code, 48, 57):
+            case checkRange(code, 65, 90):
+                clearTimeout($.fn.dropkick.keySearchTimeout);
+                $.fn.dropkick.keySearchTimeout = setTimeout(function () {
+                    $.fn.dropkick.searchStr = '';
+                }, 500);
+
+                codeChar = String.fromCharCode(code);
+                if (codeChar == $.fn.dropkick.searchStr && $.fn.dropkick.searchStr.length <= 1) {
+                    $.fn.dropkick.searchStr = codeChar;
+                } else {
+                    $.fn.dropkick.searchStr += codeChar;
+                }
+                console.log($.fn.dropkick.searchStr);
+                searchArr = ul.children().children('a:contains("' + $.fn.dropkick.searchStr + '")');
+                if (searchArr && searchArr.length > 0) {
+                    currentLink = current.children().first();
+                    currentIndex = searchArr.index(currentLink);
+                    if (currentIndex < 0 && searchArr.length > 0) {
+                        next = searchArr.first();
+                    } else {
+                        next = searchArr.filter(':gt(' + currentIndex + ')').first();
+                        next = (next.length > 0) ? next : searchArr.first();
+                    }
+                    _updateFields(next, $dk);
+                    _setCurrent(next.parent(), $dk);
+                }
+                e.preventDefault();
+                break;
+
+            default:
+                break;
+        }
     }
-  }
 
-  // Update the <select> value, and the dropdown label
-  function _updateFields(option, $dk, reset) {
-    var value, label, data;
+    // Update the <select> value, and the dropdown label
+    function _updateFields(option, $dk, reset) {
+        var value, label, data;
 
-    value = option.attr('data-dk-dropdown-value');
-    label = option.text();
-    data  = $dk.data('dropkick');
+        value = option.attr('data-dk-dropdown-value');
+        label = option.text();
+        data = $dk.data('dropkick');
 
-    $select = data.$select;
-    $select.val(value);
+        $select = data.$select;
+        $select.val(value);
 
-    $dk.find('.dk_label').text(label);
+        $dk.find('.dk_label').text(label);
 
-    reset = reset || false;
+        reset = reset || false;
 
-    if (data.settings.change && !reset) {
-      data.settings.change.call($select, value, label);
+        if (data.settings.change && !reset) {
+            data.settings.change.call($select, value, label);
+        }
     }
-  }
-
-  // Set the currently selected option
-  function _setCurrent($current, $dk) {
-    $dk.find('.dk_option_current').removeClass('dk_option_current');
-    $current.addClass('dk_option_current');
-
-    _setScrollPos($dk, $current);
-  }
-
-  function _setScrollPos($dk, anchor) {
-    var height = anchor.prevAll('li').outerHeight() * anchor.prevAll('li').length;
-    $dk.find('.dk_options_inner').animate({ scrollTop: height + 'px' }, 0);
-  }
-
-  // Close a dropdown
-  function _closeDropdown($dk) {
-    $dk.removeClass('dk_open');
-  }
-
-  // Open a dropdown
-  function _openDropdown($dk) {
-    var data = $dk.data('dropkick');
-    $dk.find('.dk_options').css({ top : $dk.find('.dk_toggle').outerHeight() - 1 });
-    $dk.toggleClass('dk_open');
-
-  }
-
-  /**
-   * Turn the dropdownTemplate into a jQuery object and fill in the variables.
-   */
-  function _build (tpl, view) {
-    var
-      // Template for the dropdown
-      template  = tpl,
-      // Holder of the dropdowns options
-      options   = [],
-      $dk
-    ;
-
-    template = template.replace('{{ id }}', view.id);
-    template = template.replace('{{ label }}', view.label);
-    template = template.replace('{{ tabindex }}', view.tabindex);
-
-    if (view.options && view.options.length) {
-      for (var i = 0, l = view.options.length; i < l; i++) {
-        var
-          $option   = $(view.options[i]),
-          current   = 'dk_option_current',
-          oTemplate = optionTemplate
-        ;
 
-        oTemplate = oTemplate.replace('{{ value }}', $option.val());
-        oTemplate = oTemplate.replace('{{ current }}', (_notBlank($option.val()) === view.value) ? current : '');
-        oTemplate = oTemplate.replace('{{ text }}', $option.text());
+    // Set the currently selected option
+    function _setCurrent($current, $dk) {
+        $dk.find('.dk_option_current').removeClass('dk_option_current');
+        $current.addClass('dk_option_current');
 
-        options[options.length] = oTemplate;
-      }
+        _setScrollPos($dk, $current);
     }
 
-    $dk = $(template);
-    $dk.find('.dk_options_inner').html(options.join(''));
-
-    return $dk;
-  }
+    function _setScrollPos($dk, anchor) {
+        var height = anchor.prevAll('li').outerHeight() * anchor.prevAll('li').length;
+        $dk.find('.dk_options_inner').animate({ scrollTop:height + 'px' }, 0);
+    }
 
-  function _notBlank(text) {
-    return ($.trim(text).length > 0) ? text : false;
-  }
+    // Close a dropdown
+    function _closeDropdown($dk) {
+        $dk.removeClass('dk_open');
+    }
 
-  $(function () {
+    // Open a dropdown
+    function _openDropdown($dk) {
+        var data = $dk.data('dropkick');
+        $dk.find('.dk_options').css({ top:$dk.find('.dk_toggle').outerHeight() - 1 });
+        $dk.toggleClass('dk_open');
 
-    // Handle click events on the dropdown toggler
-    $('.dk_toggle').live('click', function (e) {
-      var $dk  = $(this).parents('.dk_container').first();
+    }
 
-      _openDropdown($dk);
+    /**
+     * Turn the dropdownTemplate into a jQuery object and fill in the variables.
+     */
+    function _build(tpl, view) {
+        var
+            // Template for the dropdown
+            template = tpl,
+            // Holder of the dropdowns options
+            options = [],
+            $dk
+            ;
+
+        template = template.replace('{{ id }}', view.id);
+        template = template.replace('{{ label }}', view.label);
+        template = template.replace('{{ tabindex }}', view.tabindex);
+
+        if (view.options && view.options.length) {
+            for (var i = 0, l = view.options.length; i < l; i++) {
+                var
+                    $option = $(view.options[i]),
+                    current = 'dk_option_current',
+                    oTemplate = optionTemplate
+                    ;
+
+                oTemplate = oTemplate.replace('{{ value }}', $option.val());
+                oTemplate = oTemplate.replace('{{ current }}', (_notBlank($option.val()) === view.value) ? current : '');
+                oTemplate = oTemplate.replace('{{ text }}', $option.text());
+
+                options[options.length] = oTemplate;
+            }
+        }
 
-      if ("ontouchstart" in window) {
-        $dk.addClass('dk_touch');
-        $dk.find('.dk_options_inner').addClass('scrollable vertical');
-      }
+        $dk = $(template);
+        $dk.find('.dk_options_inner').html(options.join(''));
 
-      e.preventDefault();
-      return false;
-    });
+        return $dk;
+    }
 
-    // Handle click events on individual dropdown options
-    $('.dk_options a').live(($.browser.msie ? 'mousedown' : 'click'), function (e) {
-      var
-        $option = $(this),
-        $dk     = $option.parents('.dk_container').first(),
-        data    = $dk.data('dropkick')
-      ;
-    
-      _closeDropdown($dk);
-      _updateFields($option, $dk);
-      _setCurrent($option.parent(), $dk);
-    
-      e.preventDefault();
-      return false;
-    });
+    function _notBlank(text) {
+        return ($.trim(text).length > 0) ? text : false;
+    }
 
-    // Setup keyboard nav
-    $(document).bind('keydown.dk_nav', function (e) {
-      var
-        // Look for an open dropdown...
-        $open    = $('.dk_container.dk_open'),
-
-        // Look for a focused dropdown
-        $focused = $('.dk_container.dk_focus'),
-
-        // Will be either $open, $focused, or null
-        $dk = null
-      ;
-
-      // If we have an open dropdown, key events should get sent to that one
-      if ($open.length) {
-        $dk = $open;
-      } else if ($focused.length && !$open.length) {
-        // But if we have no open dropdowns, use the focused dropdown instead
-        $dk = $focused;
-      }
-
-      if ($dk) {
-        _handleKeyBoardNav(e, $dk);
-      }
+    $(function () {
+
+        // Handle click events on the dropdown toggler
+        $('.dk_toggle').live('click', function (e) {
+            var $dk = $(this).parents('.dk_container').first();
+
+            _openDropdown($dk);
+
+            if ("ontouchstart" in window) {
+                $dk.addClass('dk_touch');
+                $dk.find('.dk_options_inner').addClass('scrollable vertical');
+            }
+
+            e.preventDefault();
+            return false;
+        });
+
+        // Handle click events on individual dropdown options
+        $('.dk_options a').live(($.browser.msie ? 'mousedown' : 'click'), function (e) {
+            var
+                $option = $(this),
+                $dk = $option.parents('.dk_container').first(),
+                data = $dk.data('dropkick')
+                ;
+
+            _closeDropdown($dk);
+            _updateFields($option, $dk);
+            _setCurrent($option.parent(), $dk);
+
+            e.preventDefault();
+            return false;
+        });
+
+        // Setup keyboard nav
+        $(document).bind('keydown.dk_nav', function (e) {
+            var
+                // Look for an open dropdown...
+                $open = $('.dk_container.dk_open'),
+
+                // Look for a focused dropdown
+                $focused = $('.dk_container.dk_focus'),
+
+                // Will be either $open, $focused, or null
+                $dk = null
+                ;
+
+            // If we have an open dropdown, key events should get sent to that one
+            if ($open.length) {
+                $dk = $open;
+            } else if ($focused.length && !$open.length) {
+                // But if we have no open dropdowns, use the focused dropdown instead
+                $dk = $focused;
+            }
+
+            if ($dk) {
+                _handleKeyBoardNav(e, $dk);
+            }
+        });
     });
-  });
-})(jQuery, window, document);
\ No newline at end of file
+})(jQuery, window, document);
+
+// Make the jQuery selector, ':contains' non-case-sensitive, to handle key search.
+// NEW selector.
+jQuery.expr[':'].Contains = function (a, i, m) {
+    return jQuery(a).text().toUpperCase()
+        .indexOf(m[3].toUpperCase()) >= 0;
+};
+
+// OVERWRITES old selecor
+jQuery.expr[':'].contains = function (a, i, m) {
+    return jQuery(a).text().toUpperCase()
+        .indexOf(m[3].toUpperCase()) >= 0;
+};
\ No newline at end of file

From 4f5af0c6270b79417ceeaf44977b0b406ce764a4 Mon Sep 17 00:00:00 2001
From: Curt Kirkhoff <curt.kirkhoff@audaxhealth.com>
Date: Wed, 23 May 2012 12:50:40 -0400
Subject: [PATCH 2/6] readme updated to reflect the new key search features

---
 readme.md | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/readme.md b/readme.md
index d0de5029..b44f1f2b 100644
--- a/readme.md
+++ b/readme.md
@@ -2,6 +2,13 @@ Why this fork?
 =
 The creator [Jamie Lottering](http://twitter.com/jamielottering) has been pretty busy. This fork is to integrate additional bug fixes and even enhancements into the project that he began.
 
+New Features
+-
+The following features, developed by [Curt Kirkhoff](https://github.com/kirkhoff), enhance the key nav on select boxes, mimicking the default select box behavior. Below is a list of new behaviors:
+* Type in one letter repeatedly to cycle through options that start with that letter.
+* Type in a string of letters (within 500ms) to perform a filter/query on the options.
+* 'Space' bar now has the same functionality as 'enter' (it will select an option that is highlighted).
+
 Bug Fixes
 -
 * Allows selects with the same name to exist on the page

From c4f18ffe7f1b97162fe076a7c26f9fc8b446b220 Mon Sep 17 00:00:00 2001
From: Curt Kirkhoff <curt.kirkhoff@audaxhealth.com>
Date: Wed, 23 May 2012 12:53:46 -0400
Subject: [PATCH 3/6] reversioned, since new features have been added

---
 jquery.dropkick-1.1.0.js | 472 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 472 insertions(+)
 create mode 100755 jquery.dropkick-1.1.0.js

diff --git a/jquery.dropkick-1.1.0.js b/jquery.dropkick-1.1.0.js
new file mode 100755
index 00000000..63c7e4e4
--- /dev/null
+++ b/jquery.dropkick-1.1.0.js
@@ -0,0 +1,472 @@
+/**
+ * DropKick
+ *
+ * Highly customizable <select> lists
+ * https://github.com/JamieLottering/DropKick
+ *
+ * &copy; 2011 Jamie Lottering <http://github.com/JamieLottering>
+ *                        <http://twitter.com/JamieLottering>
+ *
+ * Bug fixes by owenallenaz
+ * https://github.com/owenallenaz/DropKick
+ *
+ * 'Key Search' update by Curt Kirkhoff
+ * https://github.com/kirkhoff/DropKick
+ */
+(function ($, window, document) {
+
+    var ie6 = false;
+
+    // Help prevent flashes of unstyled content
+    if ($.browser.msie && $.browser.version.substr(0, 1) < 7) {
+        ie6 = true;
+    }
+
+    var
+        // Public methods exposed to $.fn.dropkick()
+        methods = {},
+
+        // Cache every <select> element that gets dropkicked
+        lists = [],
+
+        // Convenience keys for keyboard navigation
+        keyMap = {
+            'left':37,
+            'up':38,
+            'right':39,
+            'down':40,
+            'enter':13,
+            'space':32
+        },
+
+        // HTML template for the dropdowns
+        dropdownTemplate = [
+            '<div class="dk_container" id="dk_container_{{ id }}" tabindex="{{ tabindex }}">',
+            '<a class="dk_toggle">',
+            '<span class="dk_label">{{ label }}</span>',
+            '</a>',
+            '<div class="dk_options">',
+            '<ul class="dk_options_inner">',
+            '</ul>',
+            '</div>',
+            '</div>'
+        ].join(''),
+
+        // HTML template for dropdown options
+        optionTemplate = '<li class="{{ current }}"><a data-dk-dropdown-value="{{ value }}">{{ text }}</a></li>',
+
+        // Some nice default values
+        defaults = {
+            startSpeed:1000, // I recommend a high value here, I feel it makes the changes less noticeable to the user
+            theme:false,
+            change:false
+        }
+        ;
+
+    // Called by using $('foo').dropkick();
+    methods.init = function (settings) {
+        settings = $.extend({}, defaults, settings);
+
+        return this.each(function () {
+            var
+                // The current <select> element
+                $select = $(this),
+
+                // Store a reference to the originally selected <option> element
+                $original = $select.find(':selected').first(),
+
+                // Save all of the <option> elements
+                $options = $select.find('option'),
+
+                // We store lots of great stuff using jQuery data
+                data = $select.data('dropkick') || {},
+
+                // This gets applied to the 'dk_container' element
+                id = $select.attr('id') || lists.length,
+
+                // This gets updated to be equal to the longest <option> element
+                width = settings.width || $select.outerWidth(),
+
+                // Check if we have a tabindex set or not
+                tabindex = $select.attr('tabindex') ? $select.attr('tabindex') : '',
+
+                // The completed dk_container element
+                $dk = false,
+
+                theme
+                ;
+
+            // Dont do anything if we've already setup dropkick on this element
+            if (data.loaded) {
+                return $select;
+            } else {
+                data.settings = settings;
+                data.tabindex = tabindex;
+                data.id = id;
+                data.$original = $original;
+                data.$select = $select;
+                data.value = _notBlank($select.val()) || _notBlank($original.attr('value'));
+                data.label = $original.text();
+                data.options = $options;
+                data.loaded = true;
+            }
+
+            // Build the dropdown HTML
+            $dk = _build(dropdownTemplate, data);
+
+            // Make the dropdown fixed width if desired
+            $dk.find('.dk_toggle').css({
+                'width':width + 'px'
+            });
+
+            // Hide the <select> list and place our new one in front of it
+            $select.before($dk);
+
+            // Update the reference to $dk
+            $dk = $dk.fadeIn(settings.startSpeed);
+
+            // Save the current theme
+            theme = settings.theme ? settings.theme : 'default';
+            $dk.addClass('dk_theme_' + theme);
+            data.theme = theme;
+
+            // Save the updated $dk reference into our data object
+            data.$dk = $dk;
+
+            // Save the dropkick data onto the <select> element
+            $select.data('dropkick', data);
+
+            // Do the same for the dropdown, but add a few helpers
+            $dk.data('dropkick', data);
+
+            lists[lists.length] = $select;
+
+            // Focus events
+            $dk.bind('focus.dropkick',function (e) {
+                $dk.addClass('dk_focus');
+            }).bind('blur.dropkick', function (e) {
+                    /*** IE moves focus from the .dk_container to .dk_options on scroll bar click ***/
+                    if ($(document.activeElement).closest($dk).length > 0) {
+                        $dk.focus();
+                        return false;
+                    }
+                    $dk.removeClass('dk_open dk_focus');
+                });
+
+            setTimeout(function () {
+                $select.hide();
+            }, 0);
+
+            $.fn.dropkick.keySearchTimeout = setTimeout(function () {
+                $.fn.dropkick.searchStr = '';
+            }, 500);
+        });
+    };
+
+    // Allows dynamic theme changes
+    methods.theme = function (newTheme) {
+        var
+            $select = $(this),
+            list = $select.data('dropkick'),
+            $dk = list.$dk,
+            oldtheme = 'dk_theme_' + list.theme
+            ;
+
+        $dk.removeClass(oldtheme).addClass('dk_theme_' + newTheme);
+
+        list.theme = newTheme;
+    };
+
+    // Reset all <selects and dropdowns in our lists array
+    methods.reset = function () {
+        for (var i = 0, l = lists.length; i < l; i++) {
+            var
+                listData = lists[i].data('dropkick'),
+                $dk = listData.$dk,
+                $current = $dk.find('li').first()
+                ;
+
+            $dk.find('.dk_label').text(listData.label);
+            $dk.find('.dk_options_inner').animate({ scrollTop:0 }, 0);
+
+            _setCurrent($current, $dk);
+            _updateFields($current, $dk, true);
+        }
+    };
+
+    // Expose the plugin
+    $.fn.dropkick = function (method) {
+        if (!ie6) {
+            if (methods[method]) {
+                return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
+            } else if (typeof method === 'object' || !method) {
+                return methods.init.apply(this, arguments);
+            }
+        }
+    };
+
+    // private
+    function checkRange (x, n, m) {
+        if (x >= n && x <= m) {
+            return x;
+        } else {
+            return !x;
+        }
+    }
+
+    // private
+    function _handleKeyBoardNav(e, $dk) {
+        var
+            code = e.keyCode,
+            data = $dk.data('dropkick'),
+            options = $dk.find('.dk_options'),
+            open = $dk.hasClass('dk_open'),
+            current = $dk.find('.dk_option_current'),
+            ul = options.find('.dk_options_inner'),
+            first = options.find('li').first(),
+            last = options.find('li').last(),
+            next,
+            prev,
+            codeChar,
+            searchArr,
+            currentIndex,
+            currentLink
+            ;
+
+        switch (code) {
+            case keyMap.space:
+            case keyMap.enter:
+                if (open) {
+                    _updateFields(current.find('a'), $dk);
+                    _closeDropdown($dk);
+                } else {
+                    _openDropdown($dk);
+                }
+                e.preventDefault();
+                break;
+
+            case keyMap.up:
+                prev = current.prev('li');
+                console.log(prev);
+                if (open) {
+                    if (prev.length) {
+                        _setCurrent(prev, $dk);
+                    } else {
+                        _setCurrent(last, $dk);
+                    }
+                } else {
+                    _openDropdown($dk);
+                }
+                e.preventDefault();
+                break;
+
+            case keyMap.down:
+                if (open) {
+                    next = current.next('li').first();
+                    if (next.length) {
+                        _setCurrent(next, $dk);
+                    } else {
+                        _setCurrent(first, $dk);
+                    }
+                } else {
+                    _openDropdown($dk);
+                }
+                e.preventDefault();
+                break;
+
+            case checkRange(code, 48, 57):
+            case checkRange(code, 65, 90):
+                clearTimeout($.fn.dropkick.keySearchTimeout);
+                $.fn.dropkick.keySearchTimeout = setTimeout(function () {
+                    $.fn.dropkick.searchStr = '';
+                }, 500);
+
+                codeChar = String.fromCharCode(code);
+                if (codeChar == $.fn.dropkick.searchStr && $.fn.dropkick.searchStr.length <= 1) {
+                    $.fn.dropkick.searchStr = codeChar;
+                } else {
+                    $.fn.dropkick.searchStr += codeChar;
+                }
+                console.log($.fn.dropkick.searchStr);
+                searchArr = ul.children().children('a:contains("' + $.fn.dropkick.searchStr + '")');
+                if (searchArr && searchArr.length > 0) {
+                    currentLink = current.children().first();
+                    currentIndex = searchArr.index(currentLink);
+                    if (currentIndex < 0 && searchArr.length > 0) {
+                        next = searchArr.first();
+                    } else {
+                        next = searchArr.filter(':gt(' + currentIndex + ')').first();
+                        next = (next.length > 0) ? next : searchArr.first();
+                    }
+                    _updateFields(next, $dk);
+                    _setCurrent(next.parent(), $dk);
+                }
+                e.preventDefault();
+                break;
+
+            default:
+                break;
+        }
+    }
+
+    // Update the <select> value, and the dropdown label
+    function _updateFields(option, $dk, reset) {
+        var value, label, data;
+
+        value = option.attr('data-dk-dropdown-value');
+        label = option.text();
+        data = $dk.data('dropkick');
+
+        $select = data.$select;
+        $select.val(value);
+
+        $dk.find('.dk_label').text(label);
+
+        reset = reset || false;
+
+        if (data.settings.change && !reset) {
+            data.settings.change.call($select, value, label);
+        }
+    }
+
+    // Set the currently selected option
+    function _setCurrent($current, $dk) {
+        $dk.find('.dk_option_current').removeClass('dk_option_current');
+        $current.addClass('dk_option_current');
+
+        _setScrollPos($dk, $current);
+    }
+
+    function _setScrollPos($dk, anchor) {
+        var height = anchor.prevAll('li').outerHeight() * anchor.prevAll('li').length;
+        $dk.find('.dk_options_inner').animate({ scrollTop:height + 'px' }, 0);
+    }
+
+    // Close a dropdown
+    function _closeDropdown($dk) {
+        $dk.removeClass('dk_open');
+    }
+
+    // Open a dropdown
+    function _openDropdown($dk) {
+        var data = $dk.data('dropkick');
+        $dk.find('.dk_options').css({ top:$dk.find('.dk_toggle').outerHeight() - 1 });
+        $dk.toggleClass('dk_open');
+
+    }
+
+    /**
+     * Turn the dropdownTemplate into a jQuery object and fill in the variables.
+     */
+    function _build(tpl, view) {
+        var
+            // Template for the dropdown
+            template = tpl,
+            // Holder of the dropdowns options
+            options = [],
+            $dk
+            ;
+
+        template = template.replace('{{ id }}', view.id);
+        template = template.replace('{{ label }}', view.label);
+        template = template.replace('{{ tabindex }}', view.tabindex);
+
+        if (view.options && view.options.length) {
+            for (var i = 0, l = view.options.length; i < l; i++) {
+                var
+                    $option = $(view.options[i]),
+                    current = 'dk_option_current',
+                    oTemplate = optionTemplate
+                    ;
+
+                oTemplate = oTemplate.replace('{{ value }}', $option.val());
+                oTemplate = oTemplate.replace('{{ current }}', (_notBlank($option.val()) === view.value) ? current : '');
+                oTemplate = oTemplate.replace('{{ text }}', $option.text());
+
+                options[options.length] = oTemplate;
+            }
+        }
+
+        $dk = $(template);
+        $dk.find('.dk_options_inner').html(options.join(''));
+
+        return $dk;
+    }
+
+    function _notBlank(text) {
+        return ($.trim(text).length > 0) ? text : false;
+    }
+
+    $(function () {
+
+        // Handle click events on the dropdown toggler
+        $('.dk_toggle').live('click', function (e) {
+            var $dk = $(this).parents('.dk_container').first();
+
+            _openDropdown($dk);
+
+            if ("ontouchstart" in window) {
+                $dk.addClass('dk_touch');
+                $dk.find('.dk_options_inner').addClass('scrollable vertical');
+            }
+
+            e.preventDefault();
+            return false;
+        });
+
+        // Handle click events on individual dropdown options
+        $('.dk_options a').live(($.browser.msie ? 'mousedown' : 'click'), function (e) {
+            var
+                $option = $(this),
+                $dk = $option.parents('.dk_container').first(),
+                data = $dk.data('dropkick')
+                ;
+
+            _closeDropdown($dk);
+            _updateFields($option, $dk);
+            _setCurrent($option.parent(), $dk);
+
+            e.preventDefault();
+            return false;
+        });
+
+        // Setup keyboard nav
+        $(document).bind('keydown.dk_nav', function (e) {
+            var
+                // Look for an open dropdown...
+                $open = $('.dk_container.dk_open'),
+
+                // Look for a focused dropdown
+                $focused = $('.dk_container.dk_focus'),
+
+                // Will be either $open, $focused, or null
+                $dk = null
+                ;
+
+            // If we have an open dropdown, key events should get sent to that one
+            if ($open.length) {
+                $dk = $open;
+            } else if ($focused.length && !$open.length) {
+                // But if we have no open dropdowns, use the focused dropdown instead
+                $dk = $focused;
+            }
+
+            if ($dk) {
+                _handleKeyBoardNav(e, $dk);
+            }
+        });
+    });
+})(jQuery, window, document);
+
+// Make the jQuery selector, ':contains' non-case-sensitive, to handle key search.
+// NEW selector.
+jQuery.expr[':'].Contains = function (a, i, m) {
+    return jQuery(a).text().toUpperCase()
+        .indexOf(m[3].toUpperCase()) >= 0;
+};
+
+// OVERWRITES old selecor
+jQuery.expr[':'].contains = function (a, i, m) {
+    return jQuery(a).text().toUpperCase()
+        .indexOf(m[3].toUpperCase()) >= 0;
+};
\ No newline at end of file

From def1bd79deb1edf00836a04b4ede1e4963978804 Mon Sep 17 00:00:00 2001
From: Curt Kirkhoff <curt.kirkhoff@audaxhealth.com>
Date: Wed, 23 May 2012 12:54:40 -0400
Subject: [PATCH 4/6] renamed to reflect new version

---
 jquery.dropkick-1.0.0.js | 472 ---------------------------------------
 1 file changed, 472 deletions(-)
 delete mode 100755 jquery.dropkick-1.0.0.js

diff --git a/jquery.dropkick-1.0.0.js b/jquery.dropkick-1.0.0.js
deleted file mode 100755
index 63c7e4e4..00000000
--- a/jquery.dropkick-1.0.0.js
+++ /dev/null
@@ -1,472 +0,0 @@
-/**
- * DropKick
- *
- * Highly customizable <select> lists
- * https://github.com/JamieLottering/DropKick
- *
- * &copy; 2011 Jamie Lottering <http://github.com/JamieLottering>
- *                        <http://twitter.com/JamieLottering>
- *
- * Bug fixes by owenallenaz
- * https://github.com/owenallenaz/DropKick
- *
- * 'Key Search' update by Curt Kirkhoff
- * https://github.com/kirkhoff/DropKick
- */
-(function ($, window, document) {
-
-    var ie6 = false;
-
-    // Help prevent flashes of unstyled content
-    if ($.browser.msie && $.browser.version.substr(0, 1) < 7) {
-        ie6 = true;
-    }
-
-    var
-        // Public methods exposed to $.fn.dropkick()
-        methods = {},
-
-        // Cache every <select> element that gets dropkicked
-        lists = [],
-
-        // Convenience keys for keyboard navigation
-        keyMap = {
-            'left':37,
-            'up':38,
-            'right':39,
-            'down':40,
-            'enter':13,
-            'space':32
-        },
-
-        // HTML template for the dropdowns
-        dropdownTemplate = [
-            '<div class="dk_container" id="dk_container_{{ id }}" tabindex="{{ tabindex }}">',
-            '<a class="dk_toggle">',
-            '<span class="dk_label">{{ label }}</span>',
-            '</a>',
-            '<div class="dk_options">',
-            '<ul class="dk_options_inner">',
-            '</ul>',
-            '</div>',
-            '</div>'
-        ].join(''),
-
-        // HTML template for dropdown options
-        optionTemplate = '<li class="{{ current }}"><a data-dk-dropdown-value="{{ value }}">{{ text }}</a></li>',
-
-        // Some nice default values
-        defaults = {
-            startSpeed:1000, // I recommend a high value here, I feel it makes the changes less noticeable to the user
-            theme:false,
-            change:false
-        }
-        ;
-
-    // Called by using $('foo').dropkick();
-    methods.init = function (settings) {
-        settings = $.extend({}, defaults, settings);
-
-        return this.each(function () {
-            var
-                // The current <select> element
-                $select = $(this),
-
-                // Store a reference to the originally selected <option> element
-                $original = $select.find(':selected').first(),
-
-                // Save all of the <option> elements
-                $options = $select.find('option'),
-
-                // We store lots of great stuff using jQuery data
-                data = $select.data('dropkick') || {},
-
-                // This gets applied to the 'dk_container' element
-                id = $select.attr('id') || lists.length,
-
-                // This gets updated to be equal to the longest <option> element
-                width = settings.width || $select.outerWidth(),
-
-                // Check if we have a tabindex set or not
-                tabindex = $select.attr('tabindex') ? $select.attr('tabindex') : '',
-
-                // The completed dk_container element
-                $dk = false,
-
-                theme
-                ;
-
-            // Dont do anything if we've already setup dropkick on this element
-            if (data.loaded) {
-                return $select;
-            } else {
-                data.settings = settings;
-                data.tabindex = tabindex;
-                data.id = id;
-                data.$original = $original;
-                data.$select = $select;
-                data.value = _notBlank($select.val()) || _notBlank($original.attr('value'));
-                data.label = $original.text();
-                data.options = $options;
-                data.loaded = true;
-            }
-
-            // Build the dropdown HTML
-            $dk = _build(dropdownTemplate, data);
-
-            // Make the dropdown fixed width if desired
-            $dk.find('.dk_toggle').css({
-                'width':width + 'px'
-            });
-
-            // Hide the <select> list and place our new one in front of it
-            $select.before($dk);
-
-            // Update the reference to $dk
-            $dk = $dk.fadeIn(settings.startSpeed);
-
-            // Save the current theme
-            theme = settings.theme ? settings.theme : 'default';
-            $dk.addClass('dk_theme_' + theme);
-            data.theme = theme;
-
-            // Save the updated $dk reference into our data object
-            data.$dk = $dk;
-
-            // Save the dropkick data onto the <select> element
-            $select.data('dropkick', data);
-
-            // Do the same for the dropdown, but add a few helpers
-            $dk.data('dropkick', data);
-
-            lists[lists.length] = $select;
-
-            // Focus events
-            $dk.bind('focus.dropkick',function (e) {
-                $dk.addClass('dk_focus');
-            }).bind('blur.dropkick', function (e) {
-                    /*** IE moves focus from the .dk_container to .dk_options on scroll bar click ***/
-                    if ($(document.activeElement).closest($dk).length > 0) {
-                        $dk.focus();
-                        return false;
-                    }
-                    $dk.removeClass('dk_open dk_focus');
-                });
-
-            setTimeout(function () {
-                $select.hide();
-            }, 0);
-
-            $.fn.dropkick.keySearchTimeout = setTimeout(function () {
-                $.fn.dropkick.searchStr = '';
-            }, 500);
-        });
-    };
-
-    // Allows dynamic theme changes
-    methods.theme = function (newTheme) {
-        var
-            $select = $(this),
-            list = $select.data('dropkick'),
-            $dk = list.$dk,
-            oldtheme = 'dk_theme_' + list.theme
-            ;
-
-        $dk.removeClass(oldtheme).addClass('dk_theme_' + newTheme);
-
-        list.theme = newTheme;
-    };
-
-    // Reset all <selects and dropdowns in our lists array
-    methods.reset = function () {
-        for (var i = 0, l = lists.length; i < l; i++) {
-            var
-                listData = lists[i].data('dropkick'),
-                $dk = listData.$dk,
-                $current = $dk.find('li').first()
-                ;
-
-            $dk.find('.dk_label').text(listData.label);
-            $dk.find('.dk_options_inner').animate({ scrollTop:0 }, 0);
-
-            _setCurrent($current, $dk);
-            _updateFields($current, $dk, true);
-        }
-    };
-
-    // Expose the plugin
-    $.fn.dropkick = function (method) {
-        if (!ie6) {
-            if (methods[method]) {
-                return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
-            } else if (typeof method === 'object' || !method) {
-                return methods.init.apply(this, arguments);
-            }
-        }
-    };
-
-    // private
-    function checkRange (x, n, m) {
-        if (x >= n && x <= m) {
-            return x;
-        } else {
-            return !x;
-        }
-    }
-
-    // private
-    function _handleKeyBoardNav(e, $dk) {
-        var
-            code = e.keyCode,
-            data = $dk.data('dropkick'),
-            options = $dk.find('.dk_options'),
-            open = $dk.hasClass('dk_open'),
-            current = $dk.find('.dk_option_current'),
-            ul = options.find('.dk_options_inner'),
-            first = options.find('li').first(),
-            last = options.find('li').last(),
-            next,
-            prev,
-            codeChar,
-            searchArr,
-            currentIndex,
-            currentLink
-            ;
-
-        switch (code) {
-            case keyMap.space:
-            case keyMap.enter:
-                if (open) {
-                    _updateFields(current.find('a'), $dk);
-                    _closeDropdown($dk);
-                } else {
-                    _openDropdown($dk);
-                }
-                e.preventDefault();
-                break;
-
-            case keyMap.up:
-                prev = current.prev('li');
-                console.log(prev);
-                if (open) {
-                    if (prev.length) {
-                        _setCurrent(prev, $dk);
-                    } else {
-                        _setCurrent(last, $dk);
-                    }
-                } else {
-                    _openDropdown($dk);
-                }
-                e.preventDefault();
-                break;
-
-            case keyMap.down:
-                if (open) {
-                    next = current.next('li').first();
-                    if (next.length) {
-                        _setCurrent(next, $dk);
-                    } else {
-                        _setCurrent(first, $dk);
-                    }
-                } else {
-                    _openDropdown($dk);
-                }
-                e.preventDefault();
-                break;
-
-            case checkRange(code, 48, 57):
-            case checkRange(code, 65, 90):
-                clearTimeout($.fn.dropkick.keySearchTimeout);
-                $.fn.dropkick.keySearchTimeout = setTimeout(function () {
-                    $.fn.dropkick.searchStr = '';
-                }, 500);
-
-                codeChar = String.fromCharCode(code);
-                if (codeChar == $.fn.dropkick.searchStr && $.fn.dropkick.searchStr.length <= 1) {
-                    $.fn.dropkick.searchStr = codeChar;
-                } else {
-                    $.fn.dropkick.searchStr += codeChar;
-                }
-                console.log($.fn.dropkick.searchStr);
-                searchArr = ul.children().children('a:contains("' + $.fn.dropkick.searchStr + '")');
-                if (searchArr && searchArr.length > 0) {
-                    currentLink = current.children().first();
-                    currentIndex = searchArr.index(currentLink);
-                    if (currentIndex < 0 && searchArr.length > 0) {
-                        next = searchArr.first();
-                    } else {
-                        next = searchArr.filter(':gt(' + currentIndex + ')').first();
-                        next = (next.length > 0) ? next : searchArr.first();
-                    }
-                    _updateFields(next, $dk);
-                    _setCurrent(next.parent(), $dk);
-                }
-                e.preventDefault();
-                break;
-
-            default:
-                break;
-        }
-    }
-
-    // Update the <select> value, and the dropdown label
-    function _updateFields(option, $dk, reset) {
-        var value, label, data;
-
-        value = option.attr('data-dk-dropdown-value');
-        label = option.text();
-        data = $dk.data('dropkick');
-
-        $select = data.$select;
-        $select.val(value);
-
-        $dk.find('.dk_label').text(label);
-
-        reset = reset || false;
-
-        if (data.settings.change && !reset) {
-            data.settings.change.call($select, value, label);
-        }
-    }
-
-    // Set the currently selected option
-    function _setCurrent($current, $dk) {
-        $dk.find('.dk_option_current').removeClass('dk_option_current');
-        $current.addClass('dk_option_current');
-
-        _setScrollPos($dk, $current);
-    }
-
-    function _setScrollPos($dk, anchor) {
-        var height = anchor.prevAll('li').outerHeight() * anchor.prevAll('li').length;
-        $dk.find('.dk_options_inner').animate({ scrollTop:height + 'px' }, 0);
-    }
-
-    // Close a dropdown
-    function _closeDropdown($dk) {
-        $dk.removeClass('dk_open');
-    }
-
-    // Open a dropdown
-    function _openDropdown($dk) {
-        var data = $dk.data('dropkick');
-        $dk.find('.dk_options').css({ top:$dk.find('.dk_toggle').outerHeight() - 1 });
-        $dk.toggleClass('dk_open');
-
-    }
-
-    /**
-     * Turn the dropdownTemplate into a jQuery object and fill in the variables.
-     */
-    function _build(tpl, view) {
-        var
-            // Template for the dropdown
-            template = tpl,
-            // Holder of the dropdowns options
-            options = [],
-            $dk
-            ;
-
-        template = template.replace('{{ id }}', view.id);
-        template = template.replace('{{ label }}', view.label);
-        template = template.replace('{{ tabindex }}', view.tabindex);
-
-        if (view.options && view.options.length) {
-            for (var i = 0, l = view.options.length; i < l; i++) {
-                var
-                    $option = $(view.options[i]),
-                    current = 'dk_option_current',
-                    oTemplate = optionTemplate
-                    ;
-
-                oTemplate = oTemplate.replace('{{ value }}', $option.val());
-                oTemplate = oTemplate.replace('{{ current }}', (_notBlank($option.val()) === view.value) ? current : '');
-                oTemplate = oTemplate.replace('{{ text }}', $option.text());
-
-                options[options.length] = oTemplate;
-            }
-        }
-
-        $dk = $(template);
-        $dk.find('.dk_options_inner').html(options.join(''));
-
-        return $dk;
-    }
-
-    function _notBlank(text) {
-        return ($.trim(text).length > 0) ? text : false;
-    }
-
-    $(function () {
-
-        // Handle click events on the dropdown toggler
-        $('.dk_toggle').live('click', function (e) {
-            var $dk = $(this).parents('.dk_container').first();
-
-            _openDropdown($dk);
-
-            if ("ontouchstart" in window) {
-                $dk.addClass('dk_touch');
-                $dk.find('.dk_options_inner').addClass('scrollable vertical');
-            }
-
-            e.preventDefault();
-            return false;
-        });
-
-        // Handle click events on individual dropdown options
-        $('.dk_options a').live(($.browser.msie ? 'mousedown' : 'click'), function (e) {
-            var
-                $option = $(this),
-                $dk = $option.parents('.dk_container').first(),
-                data = $dk.data('dropkick')
-                ;
-
-            _closeDropdown($dk);
-            _updateFields($option, $dk);
-            _setCurrent($option.parent(), $dk);
-
-            e.preventDefault();
-            return false;
-        });
-
-        // Setup keyboard nav
-        $(document).bind('keydown.dk_nav', function (e) {
-            var
-                // Look for an open dropdown...
-                $open = $('.dk_container.dk_open'),
-
-                // Look for a focused dropdown
-                $focused = $('.dk_container.dk_focus'),
-
-                // Will be either $open, $focused, or null
-                $dk = null
-                ;
-
-            // If we have an open dropdown, key events should get sent to that one
-            if ($open.length) {
-                $dk = $open;
-            } else if ($focused.length && !$open.length) {
-                // But if we have no open dropdowns, use the focused dropdown instead
-                $dk = $focused;
-            }
-
-            if ($dk) {
-                _handleKeyBoardNav(e, $dk);
-            }
-        });
-    });
-})(jQuery, window, document);
-
-// Make the jQuery selector, ':contains' non-case-sensitive, to handle key search.
-// NEW selector.
-jQuery.expr[':'].Contains = function (a, i, m) {
-    return jQuery(a).text().toUpperCase()
-        .indexOf(m[3].toUpperCase()) >= 0;
-};
-
-// OVERWRITES old selecor
-jQuery.expr[':'].contains = function (a, i, m) {
-    return jQuery(a).text().toUpperCase()
-        .indexOf(m[3].toUpperCase()) >= 0;
-};
\ No newline at end of file

From d50b6ba92ec370ccdde3d839201c9fa851b62dc4 Mon Sep 17 00:00:00 2001
From: Curt Kirkhoff <curt.kirkhoff@audaxhealth.com>
Date: Fri, 29 Jun 2012 11:42:42 -0400
Subject: [PATCH 5/6] Two new features: 1. When you select an option, Dropkick
 will fire off the change event on the associated select element. 2. Dropkick
 listens for the corresponding select element's change event, and if the
 underlying select option has been changed, Dropkick will update the view.

---
 jquery.dropkick-1.1.0.js | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/jquery.dropkick-1.1.0.js b/jquery.dropkick-1.1.0.js
index 63c7e4e4..8f5fab42 100755
--- a/jquery.dropkick-1.1.0.js
+++ b/jquery.dropkick-1.1.0.js
@@ -160,6 +160,15 @@
             $.fn.dropkick.keySearchTimeout = setTimeout(function () {
                 $.fn.dropkick.searchStr = '';
             }, 500);
+
+            // Handle change events from select boxes after newly styled dropkick selects have been rendered
+            $select.change(function(){
+                var $this = $(this);
+                var $selected = $dk.find('a[data-dk-dropdown-value=' + $this.val() + ']').parent().first();
+                var label = $this.children('option').filter(':selected').text();
+                $dk.find('.dk_label').text(label);
+                _setCurrent($selected, $dk);
+            });
         });
     };
 
@@ -247,7 +256,7 @@
 
             case keyMap.up:
                 prev = current.prev('li');
-                console.log(prev);
+                //console.log(prev);
                 if (open) {
                     if (prev.length) {
                         _setCurrent(prev, $dk);
@@ -287,7 +296,7 @@
                 } else {
                     $.fn.dropkick.searchStr += codeChar;
                 }
-                console.log($.fn.dropkick.searchStr);
+                //console.log($.fn.dropkick.searchStr);
                 searchArr = ul.children().children('a:contains("' + $.fn.dropkick.searchStr + '")');
                 if (searchArr && searchArr.length > 0) {
                     currentLink = current.children().first();
@@ -318,7 +327,7 @@
         data = $dk.data('dropkick');
 
         $select = data.$select;
-        $select.val(value);
+        $select.val(value).change();
 
         $dk.find('.dk_label').text(label);
 

From bf208d31c7c305486cb420386f398fed316b99a7 Mon Sep 17 00:00:00 2001
From: Curt Kirkhoff <curt.kirkhoff@audaxhealth.com>
Date: Fri, 29 Jun 2012 11:46:09 -0400
Subject: [PATCH 6/6] updating readme file.

---
 readme.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/readme.md b/readme.md
index b44f1f2b..a9f4d3c8 100644
--- a/readme.md
+++ b/readme.md
@@ -8,6 +8,8 @@ The following features, developed by [Curt Kirkhoff](https://github.com/kirkhoff
 * Type in one letter repeatedly to cycle through options that start with that letter.
 * Type in a string of letters (within 500ms) to perform a filter/query on the options.
 * 'Space' bar now has the same functionality as 'enter' (it will select an option that is highlighted).
+* Dropkick stays in sync with the underlying select element. If a change is made to the select element via JS, the dropkick element will also change.
+* Dropkick fires off the corresponding select element's change event when the user selects a new option.
 
 Bug Fixes
 -