jquery 搜索select

储承
2023-12-01
$('.multiple-select-group .select-search .search_input').each(function() {
        $(this).keyup(function() {
            // 获取输入值
            var currentValue = $(this).val()
            // 获取后面select的所有option
            var selectObj = $(this).parent().next();
            selectObj.find('option').each(function() {
                var textIndex = $(this).text().indexOf(currentValue)
                if(textIndex == -1) {
                    $(this).hide();
                } else {
                    $(this).show();
                }
            })
        })
    })
<div class="col-md-5 col-sm-5 select-item target-item">
    <div class="select-search target-search">
         <input type="text" class="search_input" name="sourch_search" value="" />
     </div>
     <?= Html::listBox('classhour_ids', $hasClassours, ArrayHelper::map($classhours['hasSelected'], 'id', 'name'), ['size' => 20, 'multiple' => 'multiple']) ?>
</div>

 

 类似资料: