javascriptjquerycssjquery-tokeninput

Keyboard navigation within token input scrollable dropdown


So I have a token-input scrollable dropdown.

From what I've seen, it's not possible out of the box to limit its height and make it scrollable (when I have many items within the list) so I added the following:

div.token-input-dropdown {
    overflow: auto;
    max-height: 150px;
}

My problem is that I'm unable to properly navigate with the keyboard within that list. I mean, I can press the down key and the next item will be highlighted, but when it reaches the bottom, the content won't keep scrolling. Does anyone know how to fix this?

Here is a fiddle: http://jsfiddle.net/lav911/MfRrY/


Solution

  • You need to update the following function at http://cdn.jsdelivr.net/jquery.tokeninput/1.6.0/jquery.tokeninput.js

    function select_token (token) {
        token.addClass(settings.classes.selectedToken);
        selected_token = token.get(0);
    
        // Hide input box
        input_box.val("");
    
        // Hide dropdown if it is visible (eg if we clicked to select token)
        hide_dropdown();
    }
    

    On highlight token.addClass(settings.classes.selectedToken); you need to make the token available in the view. You can either manually adjust the scrollTop or use scrollIntoView function on the selected element. Please refer scrollIntoView for the API.