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.

Doyenne

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

Doyenne

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.

Prenomen

forgot to include jquery ui in the jsfiddle. I did and it didn't work for me. – Separate

I just updated the link. It should now point to a jsfissle that includes the jquery-ui library. – Prenomen

It works when we add the library (jsfiddle.net/mnbayazit/TmZVw/3) but the window stays open (bad!). Also, your fiddle is completely at odds with what you wrote in your answer (you unbound blur). – Doyenne

Apparently I'm struggling with the fiddle links... let me try to figure it out – Prenomen

OK... I fixed the link, and I made it so the popup does not stay. I'm pretty sure it now has the exact behavior you were looking for. – Prenomen

@Ryan: This doesn't really make much sense unless focus is disabled, otherwise the input already contains the full text. jsfiddle.net/AhUq7/7 seems to prevent tab, but the autoFocus (selects first item) setting doesn't seem to work anymore... – Doyenne

I had assumed that you were worried about the case where someone's mouse was over the area where the popup appeared, causing an inadvertent selection when they tabbed past the field. – Prenomen

Answer 3

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

Separate

This doesn't sound right. If it was the blur event that was triggering the select event (focusing next element via tab), then it would also trigger when I click another element, but that doesn't happen. Also, in your fiddle you're preventing me from tabbing to the next element, which is the exact opposite of what I want. I want to be able to tab to the next input without triggering a select. – Doyenne