Laravel Livewire新增动态行后Select2 JS搜索功能失效如何解决

根本原因 #

1. 原Select2初始化逻辑仅在页面首次加载完成时执行1次，后续通过Livewire动态新增的DOM元素未触发初始化，因此无搜索效果
2. 原JS中使用的{{$index}}是PHP首次渲染时生成的固定值，所有Select的change事件会错误绑定到同一个数组索引，无法对应动态新增行的索引

具体修改步骤 #

1. 修改下拉选择框HTML结构 #

给每个产品选择下拉框新增data-index属性存储当前行索引，用于后续动态绑定Livewire属性：

<select name="orderProducts[{{$index}}][product_id]"
        wire:model="orderProducts.{{$index}}.product_id"
        class="form-control item" 
        data-index="{{ $index }}"
        style="width: 100%">
    <option value="">-- Choose product --</option>
    @foreach ($allProducts as $product)
        <option value="{{ $product->id }}">
            {{ $product->name }} - {{ $product->attribute->name }} - {{ $product->sku }} - {{ $product->barcode }}
        </option>
    @endforeach
</select>

2. 替换原有JS初始化脚本 #

封装通用初始化函数，同时监听Livewire组件更新事件，每次新增行后自动初始化新的Select2实例：

<script>
// 通用Select2初始化函数，仅处理未初始化的下拉框
function initSelect2() {
    $('.item:not(.select2-initialized)').each(function() {
        const $currentSelect = $(this);
        // 标记已初始化，避免重复执行
        $currentSelect.addClass('select2-initialized').select2();
        // 绑定值变更事件，同步到Livewire属性
        $currentSelect.on('change', function () {
            const rowIndex = $currentSelect.data('index');
            const selectedValue = $currentSelect.val();
            @this.set(`orderProducts.${rowIndex}.product_id`, selectedValue);
        });
    });
}

// 页面首次加载执行初始化
$(document).ready(initSelect2);

// 监听Livewire更新完成事件，动态初始化新增行的Select2
document.addEventListener('livewire:load', () => {
    Livewire.hook('message.processed', initSelect2);
});
</script>

额外说明 #

如果后续出现删除行后Select2实例残留的问题，可以在删除行的逻辑后手动调用对应实例的destroy方法清理，普通场景下以上代码即可正常运行。

内容的提问来源于stack exchange，提问作者Jubayer Alam