如何在Bootstrap Select元素中使用onkeyup事件？

要给Select2的搜索输入框绑定keyup事件来触发myFunction()，可以通过事件委托的方式实现（因为Select2的搜索框是动态生成的DOM元素），具体修改如下：

修改后的完整代码 #

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->

<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>

<div class="container">
    <div class="row">
        <form class="col-md-4">
            <label>Select</label>
            <select class="form-control select2 ">
               <option>Select</option> 
               <option>Car</option> 
               <option>Bike</option> 
               <option>Scooter</option> 
               <option>Cycle</option> 
               <option>Horse</option> 
            </select>
        </form>
    </div>
</div>
<script>
    // 初始化Select2
    $('.select2').select2();

    // 定义自定义函数
    function myFunction() {
        console.log("搜索框输入触发了myFunction");
        // 这里写你的业务逻辑
    }

    // 用事件委托绑定keyup事件到Select2搜索框
    $(document).on('keyup', '.select2-search__field', function() {
        myFunction();
    });
</script>

关键说明 #

• Select2的搜索输入框类名为.select2-search__field，因为它是插件动态生成的，直接绑定事件会失效，所以用$(document).on()进行事件委托，确保事件能触发。
• 先初始化Select2，再绑定事件，保证DOM元素已生成。
• 你可以在myFunction()里编写自己需要执行的逻辑，比如打印输入内容、做额外筛选等。

内容的提问来源于stack exchange，提问作者Tinashe Mphisa