Question

我正在尝试使用laravel livewire组件进行自动完成/自动提示输入，用户将在其中键入输入，如果匹配，它将显示建议的选项，否则用户只需键入输入即可。

对于这种情况，我已经创建了livewire组件。在组件中，有一个输入字段和一个数据列表以显示建议的选项。使用select标记时，我正在使用datalist标记来获取相同的样式。问题是，输入字段必须具有ID。因此，由于该组件将在同一页面上多次使用，因此如何为输入指定特定的ID。

// livewire component
<div>
<input type="text"
class="form-control form-control-sm"
name="institution"
list="institutions"
wire:model="query"
>
@if(!empty($query))
<datalist id="institutions">
    @foreach($institutions as $institution)
    <option value="{{$institution['name']}}">{{$institution['name']}}</option>
    @endforeach
</datalist>
@endif

//带电控制器 InstitutionSearchBar类扩展Component { 公开的$ query; 公共机构公共$ institutionName;

public function mount(){
    $this->query = $this->institutionName;
    $this->institutions = [];
}

public function updatedQuery(){
    $this->institutions = Institution::where('name', 'like', '%'.$this->query.'%')
    ->get()
    ->toArray();
}



public function render()
{
    return view('livewire.applicant.institution-search-bar');
}

}

在livewire组件内添加id属性

0 个答案: