Livewire中wire:model无法捕获自动补全选中值的问题求助

我实现了带自动补全功能的搜索输入框，前端展示正常，但用户输入“anc”并选中结果“anchorage”后，调用Livewire的addBusinessData方法时，dd($search_towns)输出的仍是“anc”，而非选中的“anchorage”。

相关代码 #

AJAX/自动补全JS代码

$.ajax({
    method: "GET",
    url: "/searchcity",
    success: function (response) {
      townsTags = response;
      startAutocomplete(townsTags, "#search_towns");
    }
  });

  function startAutocomplete(availableTags, inputSelector) {
    $(inputSelector).autocomplete({
      source: availableTags
    });
  }

Livewire类代码片段

public $search_towns;

public function addBusinessData(){
   dd($this->search_towns);
}

Livewire组件视图代码

<form wire:submit.prevent="addBusinessData">
  <div class="col">
    <input class="form-control" type="search" wire:model="search_towns" 
    id="search_towns" name= "search_towns" autocomplete="off" 
    placeholder="Select City/Town "/>
   <span class="text-danger">@error('search_towns'){{ $message }}@enderror</span>
 </div>
  <input type="submit" class="btn btn-primary m-4">
</form>

解决方法 #

问题出在jQuery UI Autocomplete选中结果时，仅修改了输入框的DOM值，但没有触发Livewirewire:model监听的同步事件。需要在Autocomplete的select回调中手动触发事件，通知Livewire更新绑定值。

修改startAutocomplete函数，添加select事件处理：

function startAutocomplete(availableTags, inputSelector) {
  $(inputSelector).autocomplete({
    source: availableTags,
    select: function(event, ui) {
      // 将输入框值设置为选中的完整结果
      $(this).val(ui.item.value);
      // 触发input事件，让Livewire同步更新$search_towns
      $(this).trigger('input');
      // 阻止默认行为，避免Autocomplete的默认处理干扰
      return false;
    }
  });
}

原因说明 #

Livewire的wire:model默认通过监听输入框的input、change等事件来同步前端值到后端属性。而jQuery UI Autocomplete的select事件修改输入框值后，不会自动触发这些同步事件，所以需要手动调用trigger('input')来触发Livewire的同步逻辑，确保后端$search_towns能获取到选中的完整值。

内容的提问来源于stack exchange，提问作者Hotdot Cyber