JQuery UI Autocomplete: disable tab execution?

Question

link

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

Answer 1

Ryan's example of assigning cancellation in a keypress event keypress not work for me, but we can put it in the autocomplete select parameter:

 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 up a click handler for the input text box as follows. The self.menu.select function sets the text field to the currently selected value in the autocomplete 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 make sure that this handler is not called. I was able to do this by adding a keystroke handler that returns false from the handler if the keystroke is TAB .

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

You can see the result here.

Answer 3

The tab does not really select the current item; it moves the cursor to the next item available for tabulation. So what you need to do is disable the autocomplete tab:

Lock tab using javascript?

Something like this works for me, you might need to change it a little more.

http://jsfiddle.net/Uubn6/

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