Laravel项目中如何通过jQuery获取SOL多选组件的输入搜索值

要实现将Searchable Option List（SOL）的搜索输入值同步到另一个文本框，关键是找到SOL动态生成的搜索输入框并监听其输入事件，具体步骤如下：

1. 确认SOL搜索框的DOM选择器 #

SOL初始化后会自动生成带类名.sol-search-input的搜索输入框，这是我们需要监听的目标元素。

2. 绑定输入事件实现同步 #

有两种可靠的方式实现值同步：

方式一：利用SOL初始化回调（推荐） #

在SOL的配置中加入onInitialized回调，确保组件完全初始化后再绑定事件：

$('.multi-select').searchableOptionList({
    maxHeight: '250px',
    showSelectAll: true,
    showSelectionBelowList: true,
    onInitialized: function() {
        // 获取当前SOL实例的搜索输入框
        const searchInput = this.$searchInput;
        // 监听输入事件，同步值到目标文本框
        searchInput.on('input', function() {
            // 替换#target-input为你的目标文本框选择器
            $('#target-input').val($(this).val());
        });
    }
});

方式二：使用事件委托（适配多实例场景） #

如果页面存在多个SOL组件，可通过事件委托监听动态生成的搜索框：

// 初始化SOL组件
$('.multi-select').searchableOptionList({
    maxHeight: '250px',
    showSelectAll: true,
    showSelectionBelowList: true
});

// 监听所有SOL搜索框的输入事件
$(document).on('input', '.sol-search-input', function() {
    // 替换#target-input为你的目标文本框选择器
    $('#target-input').val($(this).val());
});

3. 目标文本框示例 #

确保页面上存在用于接收同步值的文本框：

<input type="text" id="target-input" placeholder="同步搜索内容">

内容的提问来源于stack exchange，提问作者Sukhpal Singh