Add a custom event at select2 input search element

Question

I am trying to target a select2 element from the DOM and attach to its input field a keyup event. Because the element its hidden and created after the selection is pressed I cannot set any id or class name to the input. I made it work with event delegation using this code:

$('body').on('keyup', '.select2-search__field', function() {
    //TODO: do some work here
}); 

This works fine, however it works for all the select2 elements I have on the page. I want to target a specific select2 element. I tried also to get the parent of the input so I can check which select2 element is currently used but it is not possible since select2 creates the elements directly at the body and not at the selection element. So all the select2 elements have parents with same classes and cannot be differentiated.

I am using the 4.0.4 version of the select2 and as I read so far the documentation there is no option to attach a custom event to the input.

Answer 1

You can use index() and .select2-container--open class to find the item.

 $(document).ready(function(){ $('select').select2(); }) $('body').on('keyup', '.select2-search__field', function() { var selectItem = $('.select2-container--open').prev(); var index = selectItem.index(); var id = selectItem.attr('id'); alert('index of the item =' + index +' and the id = '+ id); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/> <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script> <select id="first"> <option value="a">aaaaaaaaaaaaaaa</option> <option value="b">bbbbbbbbbbbbbbb</option> <option value="c">ccccccccccccccc</option> </select> <select id="second"> <option value="1">111111111111</option> <option value="2">222222222222</option> <option value="3">333333333333</option> </select> <select id="third"> <option value="q">qqqqqqqqqq</option> <option value="w">wwwwwwwwww</option> <option value="e">eeeeeeeeee</option> </select> 

Answer 2

You could use :eq in the selector; https://api.jquery.com/eq-selector/

eq(1) because you want the second, index starts at 0

$('body').on('keyup', '.select2-search__field:eq(1)', function() {
    //TODO: do some work here
});

Do run the snippet and change the value of the select fields;

 $(document).on("change", ".select2-search__field:eq(1)", function() { alert("Hello World!"); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select class="select2-search__field"> <option>A1</option> <option>A2</option> <option>A3</option> </select> <select class="select2-search__field"> <option>B1</option> <option>B2</option> <option>B3</option> </select> <select class="select2-search__field"> <option>C1</option> <option>C2</option> <option>C3</option> </select> 

Answer 3

You can find the select that is being clicked by $(".select2-container--open").prev(); and check if it has specific data-attribute you added to determine whether to do the stuff or not.

 $(document).ready(function() { $('.my-select').select2(); }); $('body').on('keyup', '.select2-search__field', function() { let $select = $(".select2-container--open").prev(); if($select.data("show")) { // TODO: do some work here console.log(this.value) } }); 

 select { width: 100px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/js/select2.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/css/select2.min.css" rel="stylesheet" /> <div> <select class="my-select"> <option value="1">Option1</option> <option value="2">Option2</option> </select> </div> <div> <select class="my-select" data-show="true"> <option value="3">Option3</option> <option value="4">Option4</option> </select> </div>