jQuery UI Autocomplete: Disable tab completion?

Question

reference

How can I disable the use of the Tab key to select the current/highlighted item? I only want Enter to fill it.

Answer 1

Ryan's example of putting the cancellation in the keypress event didn't work for me, but we can put it in the select option of autocomplete:

select: function(e, ui) {
    if(e.keyCode === 9) return false;
    // other code...
}

Answer 2

When you use the .autocomplete() modifier in jquery-ui, it sets the keypress handler for your input textbox to as follows. The self.menu.select sets the text box to the currently highlighted value in the auto-complete list

.bind( "keydown.autocomplete", function( event ) {
...
switch( event.keyCode ) {
...
case keyCode.TAB:
    if ( !self.menu.active ) {
       return;
    }
    self.menu.select( event );
    break;
...
    }
}

So what you need to do is ensure that this handler does not get called. I was able to do this by adding a handler to the keypress that returns false from the handler if the keypress is TAB.

$( "#tags" ).autocomplete({
        source: availableTags
    });
$("#tags").keypress(function(e){
    if(e.keyCode == keyCode.TAB) {
        e.stopImmediatePropagation();
    }
});

You can see the result here.