将id添加到select2输入文本

Question

is it possible to add an id to the input type text that select2 is generating? to explain what i want, i have to make a filter based on cities, since there are too many cities, i cant load them all at once, so i made an autocomplete, but the user can choose more cities, so i thought about an autocomplete with select2, i tried using the class, like this

$('.select2-search__field').on('keyup', function(e) {
                console.log($(this).val());
            }); 

The problem is, i have more select2 on my page (one with some codes, one with some regions etc.), and i would do useless ajax requests for each of them

Answer 1

Let's think outside the box. You might not have to put an ID on a Select2 instance.

You need to somehow differentiate between different instances of Select2. Maybe an easier approach, which you're already familiar with, would be to wrap them in a div which has an ID:

<div id=first>
  <!-- one select2 -->
</div>
<div id=second>
  <!-- the other select2-->
</div>

You can now access different ones based on the ID of the wrapper.

$('#first .select2-search__field')