title: bootstrap typeahead with max height and scrollable
body: <p>I'm trying to make the <code>twitter bootstrap</code> typeahead dropdown menu scrollable when I put a <code>max-height</code> to its class.</p>
  
  <p>The problem is that the function that the plugin uses for sorting the results with the <code>key_up</code> or <code>key_down</code> doesn't scroll to the hidden options.</p>
  
  <p>I've tried modifying the <code>keydown</code> function like this:</p>
  
  <pre><code>next: function (event) {
  
    //original code
    var active = this.$menu.find('.active').removeClass('active')
      , next = active.next();
    if (!next.length) {
      next = $(this.$menu.find('li')[0])
    }
    next.addClass('active');
  
    //modification
    this.$menu.animate({scrollTop: next.position().top}, 0);
  }
  </code></pre>
  
  <p>But apparently the <code>jquery</code> <code>.position()</code> used to do the animation in the modification I used does not return appropiate values.</p>
  
  <p>Please note that I need to use the typeahead a lot in a big form of more than 150 inputs, so please give me a general solution.</p>