jQuery UI Autocomplete: Disable tab completion?

reference

How can I disable the use of the Tab key to select the current/highlighted item? I only w开发者_如何学运维ant Enter to fill it.

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...
}

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.

Tab isn't really selecting the current item, it is moving the cursor to the next tab-able item. So what you need to do is disable tab for the autocomplete:

Lock tab key with javascript?

Something like this is working for me, you may need to modify it some more.

http://jsfiddle.net/Uubn6/

Basically, you capture the keydown event prior to passing it to the autocomplete keydown handler. When you capture it, you can do whatever you want (pass it or not).