在select2上搜索时调用ajax

Question

我有两个select2组件，我想在搜索时绑定一个keyup事件。如何绑定到特定元素？

唯一可行的是以下内容，但这会触发两个select2项目

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

我的cshtml包含选择项目：

@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
        });