diff --git a/index.html b/index.html
index 13f5272..f4f2c37 100644
--- a/index.html
+++ b/index.html
@@ -21,7 +21,7 @@
     <input type="submit"/>
   </form>
 
-  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
+  <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
   <script src="js/jquery.sparkbox-select.js"></script>
   <script src="js/script.js"></script>
 </body>
diff --git a/js/jquery.sparkbox-select.js b/js/jquery.sparkbox-select.js
index abc6d15..40889b8 100644
--- a/js/jquery.sparkbox-select.js
+++ b/js/jquery.sparkbox-select.js
@@ -1,130 +1,221 @@
 (function($) {
-  var selectboxCounter = 0;
-  
+
   $.fn.sbCustomSelect = function(options) {
     var iOS = (navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i)),
         android = (navigator.userAgent.match(/Android/i)),
-        UP = 38, DOWN = 40, SPACE = 32, RETURN = 13, TAB = 9,
+        LEFT = 37, UP = 38, RIGHT = 39, DOWN = 40, SPACE = 32, RETURN = 13, TAB = 9, ESC = 27, PGUP = 33, PGDOWN = 34,
         matchString = '',
+        visibleDropdowns = $(),
         settings = $.extend({
-          appendTo: false
+          appendTo: false,
+          pollPosition: false //Polling frequency in microsecounds (500-1000 should be enough), default false disableds polling. Use this option only if your selects position may change while dropdown is opened.
         }, options);
 
+    var scrollToSelected = function($dropdown, recover) {
+        var $selected = $dropdown.find('li.selected');
+        if(!$selected.length) return true;
+
+        //recover scroll position (after fadeOut)
+        if($dropdown.data('sb-saved-scrollTo') && recover) $dropdown.scrollTop($dropdown.data('sb-saved-scrollTo'));
+
+        //we can't just use $selected.position().top, if the sb-dropdown is positioned static -.-
+        var scrollTop = $dropdown.scrollTop(),
+        offset = ($selected.offset().top+scrollTop-$dropdown.offset().top);
+
+        if(offset < scrollTop) {
+            $dropdown.scrollTop(offset);
+        } else if($dropdown.innerHeight()+scrollTop < offset+$selected.outerHeight()) {
+            var scrollTo = offset+$selected.outerHeight()-$dropdown.innerHeight();
+            $dropdown.scrollTop(scrollTo);
+        }
+        $dropdown.data('sb-saved-scrollTo', $dropdown.scrollTop());
+    }
+
+    var fixDropdownPositions = function(element) {
+        if (settings.appendTo) {
+            var $elements = $(element).is('.sb-dropdown') ? $(element) : visibleDropdowns;
+
+            $elements.each(function() {
+                var $sbCustom = $(this).data('sb-custom'),
+                    offset = $sbCustom.offset();
+
+                $(this).css({
+                    'top': offset.top,
+                    'left': offset.left,
+                    'width': $sbCustom.width() * 0.8
+                });
+            });
+        }
+    }
+
     // Sync custom display with original select box and set selected class and the correct <li>
-    var updateSelect = function() {
-      var $this = $(this),
-          $dropdown = $('.sb-dropdown[data-id=' + $this.parent().data('id') + ']'),
-          $sbSelect = $this.siblings('.sb-select');
-      
-      if (this.selectedIndex != -1) {
-        $sbSelect.val(this[this.selectedIndex].innerHTML);
-      
-        $dropdown.children().removeClass('selected')
-          .filter(':contains(' + this[this.selectedIndex].innerHTML + ')').addClass('selected');
+    var updateSelect = function(select) {
+      var $select = this === window ? $(select) : $(this),
+          $dropdown = $select.parent().data('sb-dropdown'),
+          $sbSelect = $select.siblings('.sb-select');
+
+      if ($select.prop("selectedIndex") != -1) {
+        $sbSelect.val($select.children().eq($select.prop("selectedIndex")).html());
+
+        if($dropdown) {
+            $dropdown.children('.selected').removeClass('selected');
+            $dropdown.children().eq($select.prop("selectedIndex")).addClass('selected');
+            scrollToSelected($dropdown);
+        }
       }
     };
-    
+
     // Update original select box, hide <ul>, and fire change event to keep everything in sync
-    var dropdownSelection = function(e) {
-      var $target = $(e.target),
-          id = $target.closest('ul').attr('data-id'),
-          $option = $('.sb-custom[data-id=' + id + ']').find('option').filter('[value="' + $target.parent().data('value') + '"]');
-          
+    var dropdownSelection = function(e, preventClose) {
       e.preventDefault();
-      
+      setFocus.call($(this).data('sb-custom'));
+      var $target = $(e.target).parent('li').andSelf().filter('li');
+      if(!$target.length) return true;
+
+      var $option = $target.data('sb-option');
+
       $option[0].selected = true;
-      $target.closest('ul').fadeOut('fast');
-      $option.parent().trigger('change');
+      if(!preventClose) {
+          hideDropdown({});
+          if($option.parent().data('lastVal') != $option.parent().val()) $option.parent().data('lastVal', $option.parent().val()).trigger('change');
+      } else updateSelect($option.parent());
     };
     
     // Create the <ul> that will be used to change the selection on a non iOS/Android browser
-    var createDropdown = function($select, i) {
+    var createDropdown = function($select) {
       var $options = $select.children(),
-          $dropdown = $('<ul data-id="' + i + '" class="sb-dropdown"/>');
+          $dropdown = $('<ul class="sb-dropdown"/>').data('sb-custom', $select.parent());
       
       $options.each(function() {
         $this = $(this);
-        $dropdown.append('<li data-value="' + $this.val() + '"><a href=".">' + $this.text() + '</a></li>');
+        $('<li><a href=".">' + $this.text() + '</a></li>').data('sb-option', $this).appendTo($dropdown);
       });
-      $dropdown.bind('click', dropdownSelection);
       
       return $dropdown;
     };
     
     // Clear keystroke matching string and show dropdown
     var viewList = function(e) {
-      var $this = $(this),
-          id = $this.data('id');
-          
+      var $dropdown = $(this).parent().data('sb-dropdown') || $(this);
+
+      //if it's already the active dropdown don't do anything
+      if($dropdown.is('.active')) return false;
+
       clearKeyStrokes();
 
-      $('.sb-dropdown').filter('[data-id!=' + id + ']').fadeOut('fast');
-      $('.sb-dropdown').filter('[data-id=' + id + ']').fadeIn('fast');
-      
+      hideDropdown({target: $dropdown});
+      fixDropdownPositions($dropdown);
+      visibleDropdowns = visibleDropdowns.add($dropdown);
+      $dropdown.addClass('active').stop().fadeTo('fast', 1);
+
+      scrollToSelected($dropdown, true);
+
       e.preventDefault();
     };
     
     // Hide the custom dropdown
     var hideDropdown = function(e) {
-      if (!$(e.target).closest('.sb-custom').length) {
-        $('.sb-dropdown').fadeOut('fast');
-      }
+        var $matches = $(e.target).closest('.sb-dropdown, .sb-custom'),
+            $prevent = $matches.data('sb-dropdown') || $matches,
+            $toHide = $('.sb-dropdown.active').not($prevent);
+
+        if($toHide.length && e.preventDefault) e.preventDefault();
+        $toHide.removeClass('active').stop().fadeOut('fast', function() {
+            visibleDropdowns = visibleDropdowns.not($(this));
+        });
     };
-    
+
+    var setFocus = function() {
+        $(this).children('input.sb-select').focus();
+    };
+
     // Manage keypress to replicate browser functionality
     var selectKeypress = function(e) {
       var $this = $(this),
-          $current = $('.sb-dropdown[data-id=' + $this.data('id') + ']').find('.selected');
-          
-          
-      // if ($('.sb-dropdown[data-id=' + $this.data('id') + ']').find('.selected') || $('.sb-dropdown[data-id=' + $this.data('id') + ']');
-          // $this.siblings('ul').find('.selected');
-      
-      if ((e.keyCode == UP || e.keyCode == DOWN || e.keyCode == SPACE) && $current.is(':hidden')) {
-        $current.focus();
-        return;
+          $current = $this.parent().data('sb-dropdown').find('.selected');
+
+      //select in dropdown if it's open... else directly change select value to target element
+      function softSelect(el) {
+          if($current.is(':hidden')) $(el).trigger('click');
+          else $(el).addClass('selected').trigger('click', true);
       }
-      
-      if (e.keyCode == UP && $current.prev().length) {
-        e.preventDefault();
-        $current.removeClass('selected');
-        $current.prev().addClass('selected');
-      } else if (e.keyCode == DOWN && $current.next().length) {
+
+      if (e.keyCode >= 48 && e.keyCode <= 90) {
+        matchString += String.fromCharCode(e.keyCode);
+
+        var matches = [],
+            matchFirstChar = false;
+
+        if(!matchString.replace(new RegExp(matchString[0],"g"), '').length) matchFirstChar = true;
+
+        $current.siblings('li').andSelf().children('a').each(function() {
+            if ($.trim(this.innerHTML.toUpperCase()).indexOf(matchFirstChar ? matchString[0] : matchString) === 0) {
+                matches.push(this);
+            }
+        });
+        if (matches.length) {
+            if(matchFirstChar) {
+                softSelect($(matches[($(matches).index($current.find('a'))+1)%matches.length]).parent());
+            }
+            else softSelect($(matches[0]).parent());
+        }
+      } else clearKeyStrokes();
+
+      if ((e.keyCode == RETURN || e.keyCode == SPACE) && $current.is(':hidden')) {
+        $current.focus();
         e.preventDefault();
-        $current.removeClass('selected');
-        $current.next().addClass('selected');
-      }
-      
-      if (e.keyCode == RETURN || e.keyCode == SPACE) {
-        $current.trigger('click');
         return;
       }
-      
-      if (e.keyCode >= 48 && e.keyCode <= 90) {
-        matchString += String.fromCharCode(e.keyCode);
-        checkforMatch(e);
+
+      function nextPage(elements) {
+        var hideAfter = false;
+        if($current.is(':hidden')) {
+            $current.parent().show();
+            hideAfter = true;
+        }
+        var targetDistance = $current.parent().innerHeight()-($current.outerHeight()*2),
+            distance = 0,
+            $target = $(elements).last();
+
+        elements.each(function() {
+            if(distance < targetDistance) distance += $(this).outerHeight();
+            else {
+                $target = $(this);
+                return false;
+            }
+        });
+        if(hideAfter) $current.parent().hide();
+        softSelect($target);
       }
-      
-      if (e.keyCode == TAB && $current.is(':visible')) {
-        e.preventDefault();
+
+      switch (e.keyCode) {
+          case UP:
+          case LEFT:
+              e.preventDefault();
+              if($current.prev().length) softSelect($current.prev());
+              break;
+          case RIGHT:
+          case DOWN:
+              e.preventDefault();
+              if($current.next().length) softSelect($current.next());
+              break;
+          case PGUP:
+              e.preventDefault();
+              nextPage($current.prevAll());
+              break;
+          case PGDOWN:
+              e.preventDefault();
+              nextPage($current.nextAll());
+              break;
+      }
+
+      if ((e.keyCode == TAB  && $current.is(':visible')) || e.keyCode == RETURN || e.keyCode == SPACE || e.keyCode == ESC) {
         $current.trigger('click');
-        hideDropdown(e);
+        e.preventDefault();
+        return;
       }
     };
     
-    // Check keys pressed to see if there is a text match with one of the options
-    var checkforMatch = function(e) {
-      
-      var re = '/' + matchString + '.*/';
-      
-      $(e.target).siblings('ul').find('a').each(function() {
-        if (this.innerHTML.toUpperCase().indexOf(matchString) === 0) {
-          $(this).trigger('click');
-          return;
-        }
-      });
-    };
-    
     // Clear the string used for matching keystrokes to select options
     var clearKeyStrokes = function() {
       matchString = '';
@@ -145,12 +236,13 @@
      * After all of the setup is complete, trigger the change event on the original select box to update the .sb-select input
      */
     this.each(function() {
-      var $self = $(this);
+      var $self = $(this),
+          $sbCustom = $('<div class="sb-custom"/>');
 
       $self.attr('tabindex', -1)
-        .wrap('<div data-id="' + selectboxCounter + '" class="sb-custom"/>')
-        .after('<input data-id="' + selectboxCounter + '" type="text" class="sb-select" readonly="readonly" />')
-        .bind('change', updateSelect);
+        .after($sbCustom)
+        .appendTo($sbCustom)
+        .after('<input type="text" class="sb-select" readonly="readonly" />');
       
       
       if (iOS || android) {
@@ -163,33 +255,39 @@
           'z-index': 1000
         });
       } else {
-        
-        $self.next().bind('click', viewList);
-        
+
+        $sbCustom.data('sb-dropdown', createDropdown($self));
+
         if (!settings.appendTo) {
-          $self.after(createDropdown($self, selectboxCounter));
+            $sbCustom.append($sbCustom.data('sb-dropdown'));
         } else {
-          var offset = $self.parent().offset();
-          
-          $(settings.appendTo).append(createDropdown($self, selectboxCounter).css({
-            'top': offset.top,
-            'left': offset.left,
-            'width': $self.parent().width() * 0.8
-          }));
+            $(settings.appendTo).append($sbCustom.data('sb-dropdown'));
+            if(typeof(settings.pollPosition) === 'number') {
+                var callback = function() {
+                    fixDropdownPositions();
+                    window.setTimeout(callback, settings.pollPosition);
+                };
+                callback();
+            }
         }
+
+        $self.data('lastVal', $self.val());
       }
 
-      $self.trigger('change');
-      selectboxCounter++;
+      updateSelect($self);
     });
     
     // Hide dropdown when click is outside of the input or dropdown
-    $(document).bind('click', hideDropdown);
-    
-    $('.sb-custom').find('.sb-select').live('keydown', selectKeypress);
-    $('.sb-custom').bind('blur', clearKeyStrokes);
-    $(document).delegate('.sb-dropdown', 'focus', viewList);
-    
+    $(document).bind('mousedown', hideDropdown)
+        .delegate('.sb-custom', 'blur', clearKeyStrokes)
+        .delegate('.sb-custom', 'click', setFocus)
+        .delegate('.sb-custom select', 'change', updateSelect)
+        .delegate('.sb-select', 'keydown', selectKeypress)
+        .delegate('.sb-select', 'click', viewList)
+        .delegate('.sb-dropdown', 'focus', viewList)
+        .delegate('.sb-dropdown', 'click', dropdownSelection);
+    $(window).bind('resize', fixDropdownPositions);
+
     return this;
   };
 })(jQuery);
\ No newline at end of file
diff --git a/test/index.html b/test/index.html
index 6017b7c..e140973 100644
--- a/test/index.html
+++ b/test/index.html
@@ -16,7 +16,7 @@
 
   <script src="../js/modernizr-1.7.min.js"></script>
   
-  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
+  <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
   <script src="../js/jquery.sparkbox-select.js"></script>
 
 <!-- test runner files -->
diff --git a/test/tests.js b/test/tests.js
index c1d8854..adc581a 100644
--- a/test/tests.js
+++ b/test/tests.js
@@ -43,8 +43,8 @@ $(document).ready(function() {
     $originalSelect.val('foxfire').trigger('change');
     
     equal($originalSelect.val(), 'foxfire', 'The original select is set correctly');
-    equal($sbDropdown.find('.selected').data('value'), 'foxfire', 'The dropdown is set correctly');
-    
+    equal($sbDropdown.find('.selected').data('sb-option').attr('value'), 'foxfire', 'The dropdown is set correctly');
+
     $sbDropdown.find('a').eq(0).trigger('click');  
   });