0

Setup:

On a html page with three text inputs side by side, 'Text 1' is a jQuery autocomplete as well as 'Text 3', 'Text 2' is just an normal textbox. as per below screenshot.

enter image description here

quest:

The behavior I'm trying to achieve is that after selection in the last textbox (the 'Text 3', which is a jQuery autocomplete) that the focus shifts back to the 'Text 2' textbox on [TAB] press, the behavior should be similar to pressing [SHIFT] + [TAB] upon selection in the list of the autocomplete.

problem:

This works 'sort of' on 'Text 1' primarily because focus would move to 'Text2' anyway. To move correctly on [Enter] I have captured the event.keypress==13 on the select event of the autocomplete. In 'Text 1' the top value gets selected and focus shifts to 'Text 2' if I press either [Enter] or [TAB] which is the correct behavior.

$("#Text1").autocomplete({
    source: someArray,
    autoFocus: true,
    delay: 50,
    select: function (event, ui) {
        $('#Text1').data('someid', ui.item.uKey);

        //Ensure move to next field on [Enter]
        if (event.keyCode == 13) {
            $('#Text2').focus();
        }
    },
    close: function (event, ui) {
    }
});

This capturing does not seem to work in case of the TAB key. If I amend the select event of the autocomplete I can capture the keypress event, but if I request the same behavior it doesn't work.

...
//amended select statement
select: function (event, ui) {
    $('#Text1').data('someid', ui.item.uKey);

    //Try capture [TAB] and move to next field on [TAB] keypress ** doesn't work ! **
    if (event.keyCode == 9) {
        $('#Text2').focus(); //focus doesn't move, though Text1 loses it...
    }

    //Ensure move to next field on [Enter]
    if (event.keyCode == 13) {
        $('#Text2').focus();
    }
},

If I try to control the behavior of the [TAB] key on the keypress event of the 'Text 3' textbox I get no control whatsoever. On [Enter] no problems, correct redirection, but not on [TAB].

I've tried capturing the keypress event on the textbox (outside the autocomplete) this does capture the keypress event but also doesn't move the focus to 'Text 2'.

I've tried event.preventDefault(); and stopPropagation(); on the [TAB] press event of 'Text 3' but that indeed just stops any propagation, moreover; the autocomplete will not select if you do that...

$('#Text3').keypress(function(event){
   if (event.keyCode==9){
      event.preventDefault();
      event.stopPropagation();
      $('#Text2').focus();
   }
});

So, how to select the top item AND redirect focus to any desired field on the autocomplete on [TAB] press event ?

mtholen
  • 1,631
  • 2
  • 15
  • 27
  • Possible duplicate of below question [https://stackoverflow.com/questions/28084191/jquery-how-to-get-the-key-tab-event-on-an-input-element](https://stackoverflow.com/questions/28084191/jquery-how-to-get-the-key-tab-event-on-an-input-element) – Ketan Vaghasiya Jul 31 '18 at 08:03
  • Unfortunately, no it isn't a duplicate. I know how to capture a TAB key, and to handle the process thereafter. It's specifically about the combination with jQuery autocomplete. – mtholen Jul 31 '18 at 13:30
  • If you can create a fiddle then i can work it out. – Ketan Vaghasiya Aug 01 '18 at 04:10

0 Answers0