如何实现多选搜索框搜索结果的首个元素自动获得焦点？

嘿，我刚好做过类似的需求，咱们可以通过扩展multiselect的过滤回调来实现这个功能。下面是具体的实现步骤：

首先，你需要在multiselect的初始化配置里添加filtering回调函数，这个函数会在每次过滤完成后触发，我们就可以在这里给第一个搜索结果设置焦点。

修改后的JavaScript代码如下：

$('.newmultiselect').multiselect({
    enableFiltering: true,
    filterPlaceholder: 'Search',
    enableCaseInsensitiveFiltering: true,
    includeSelectAllOption: false,
    onChange: function(element, checked) {
        var selectID = $(element).parent().attr('id');
        $("#"+selectID).valid();
    },
    // 新增过滤回调函数，处理焦点设置
    filtering: function(results) {
        // 加个短延时确保过滤后的列表完成DOM渲染
        setTimeout(function() {
            // 筛选出所有未被隐藏的搜索结果选项，取第一个
            const firstVisibleOption = $('.multiselect-container li:not(.multiselect-filter-hidden) a').first();
            if (firstVisibleOption.length > 0) {
                firstVisibleOption.focus(); // 给首个结果设置焦点
            }
        }, 10);
    }
});

searchMultiselect();

代码细节说明： #

• filtering回调会在用户输入搜索词、完成列表过滤后自动触发
• 用setTimeout是为了等待过滤后的列表完成DOM更新，避免找不到目标元素
• 通过选择器.multiselect-container li:not(.multiselect-filter-hidden) a精准定位未被隐藏的搜索结果，确保只操作可见选项

你的状态字段HTML部分可以保持不变：

<div class="col-12 col-sm-6 col-md-6 col-lg-4">
    <div class="form-group">
        <p>State<span class="notice-txt">*</span></p>
        <select class="form-control validrmvcls newmultiselect" id="state" name="state">
            <option value="">--Select--</option>
            @foreach($states as $st)
                <option value="{{$st['state_prefix']}}">{{$st['state_prefix']}}</option>
            @endforeach
        </select>
    </div>
</div>

这样配置后，每次你在搜索框输入内容，过滤出来的第一个选项就会自动获得焦点，用户可以直接通过键盘操作选中，体验会流畅很多~

内容的提问来源于stack exchange，提问作者Siva Ganesh