I have a forum in which I change the functionality of tab to enter. When the user presses enter the next input field get focus and somehow iImanage to open the select2 select box on focusin event so the select 2 box opens up.

But, when I select the value and press enter in selec2 select box it does not close and remain open on enter key press event but it closes. When I change the enter key event to any keypress event than select2 get close and works fine but I have to do that by enter.

What I want:
When the user selects the value in select2 search-box and presses enter it get close and focus move to next input field or any field.

What i have done so far.

$('.search-select').on("focusin",function(event) {
    $('#s2id_form-field-select-3').select2('open');
    event.preventDefault();  
});

Select2 with enter key event which isn't working

$('.select2-input').on("keypress", function(e) {
            if (e.keyCode == 13) {
                $("#select2-drop-mask").click();
                $('#name').focus();
                e.preventDefault();   
                }
       });

Select2 with any keypress event which is working

$('.select2-input').on("keypress", function(event) {
                $("#select2-drop-mask").click();
                $('#name').focus();
                event.preventDefault();         
});

Markup

 <select id="form-field-select-3" name="register_id" class="form-control search-select" required="required">
   <option value="">&nbsp;</option>
   <? $query=$this->dba->get_dropdown('register',array('id','name'));
      foreach($query as $key=>$value):
   ?>
   <option value="<?=$key?>"><?=$value; ?></option>}
  <? endforeach;?>
</select>

Apologies in advance for mistakes, this is my first time using Select2.

I have a forum in which I change the functionality of tab to enter. When the user presses enter the next input field get focus and somehow iImanage to open the select2 select box on focusin event so the select 2 box opens up.

But, when I select the value and press enter in selec2 select box it does not close and remain open on enter key press event but it closes. When I change the enter key event to any keypress event than select2 get close and works fine but I have to do that by enter.

What I want:
When the user selects the value in select2 search-box and presses enter it get close and focus move to next input field or any field.

What i have done so far.

$('.search-select').on("focusin",function(event) {
    $('#s2id_form-field-select-3').select2('open');
    event.preventDefault();  
});

Select2 with enter key event which isn't working

$('.select2-input').on("keypress", function(e) {
            if (e.keyCode == 13) {
                $("#select2-drop-mask").click();
                $('#name').focus();
                e.preventDefault();   
                }
       });

Select2 with any keypress event which is working

$('.select2-input').on("keypress", function(event) {
                $("#select2-drop-mask").click();
                $('#name').focus();
                event.preventDefault();         
});

Markup

 <select id="form-field-select-3" name="register_id" class="form-control search-select" required="required">
   <option value="">&nbsp;</option>
   <? $query=$this->dba->get_dropdown('register',array('id','name'));
      foreach($query as $key=>$value):
   ?>
   <option value="<?=$key?>"><?=$value; ?></option>}
  <? endforeach;?>
</select>

Apologies in advance for mistakes, this is my first time using Select2.

• javascript
• jquery
• jquery-select2

3 Answers 3

For me worked

$(document).on('keyup keydown', 'input.select2-search__field', function(e) {   

I think you're looking for keydown:

$('.select2-input').on("keydown", function(e) {
            if (e.keyCode == 13) {
                $("#select2-drop-mask").click();
                $('#name').focus();
                e.preventDefault();   
                }
       });

They're a little different. In this case, keypress isn't inserting anything into your field.

You cannot use jQuery to attach a keydown or keypress event handler to capture those events from a Select2;. Therefore, you need to install a keydown event handler that captures the event before Select2 handles it. You can do this with document.addEventListener('keydown', handler, true);. That third parameter tells the browser to let your handler handle the keydown event first.

Example:

function myhandler(event){
if (event.keyCode == 117) {
event.preventDefault();
event.stopPropagation();

// do what you want when user press F6 on keyboard;
        return false;
    }
}

document.addEventListener('keydown', myhandler, true);