Вызовите ajax во время поиска на select2

Question

У меня есть два компонента select2, и я хочу связать событие keyup во время поиска.Как я могу привязать к определенному элементу?

Единственное, что работает, это следующее, но это срабатывает на оба элемента select2

$(document).on('keyup', '.select2-search__field', function (e) { 
  // ajax call to get more product codes
});

Мой cshtml, который содержит элементы select:

@Html.DropDownList("CatalogueCode", Enumerable.Empty<SelectListItem>(), new { @class = "form-control" })     
@Html.DropDownList("ProductCode", Enumerable.Empty<SelectListItem>(), new { @class = "form-control" })                                                 

Answer 1

Вероятно, это связано с тем, как select2 создает HTML-код.Класс должен быть добавлен в DropdownList следующим образом:

 $("#ProductCode").select2({
        dropdownCssClass: "productCodesClass"
    });

Тогда, если мы хотим взять значение, записанное пользователем в поле поиска, следующий код верен.

 $(document).on('keyup', '.productCodesClass > span.select2-search> input.select2-search__field', function (e) { 
            // ajax call to get more product codes
            // $(this).val() is user's input
        });