Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

"Keypress" event is not working correctly, using jQuery & 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.

like image 603
Vicky Avatar asked Jun 07 '15 18:06

Vicky


2 Answers

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.

like image 104
Sze-Hung Daniel Tsui Avatar answered Oct 13 '22 01:10

Sze-Hung Daniel Tsui


For me worked

$(document).on('keyup keydown', 'input.select2-search__field', function(e) {   
like image 41
atazmin Avatar answered Oct 13 '22 00:10

atazmin