可搜索的下拉 Laravel Blade

在 Laravel 应用程序中，创建可搜索的下拉列表可以是一项挑战。但是，Laravel Blade 模板和一些前端技术使其变得非常容易。

单个可搜索的下拉列表

创建单个可搜索的下拉列表需要使用一些 JavaScript 库和 Laravel Blade 模板。

所需库

我们需要以下库才能创建单个可搜索的下拉列表：

• jQuery
• Select2.js
• Select2-CSS

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.1.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.1.0/js/select2.min.js"></script>

Blade 模板

在 Laravel Blade 中，我们可以使用 select 标签创建下拉列表。以下是一个基本的 Blade 模板，用于创建单个可搜索的下拉列表：

<div class="form-group">
    <label for="select2">Select2 Searchable Dropdown</label>
    <select class="form-control select2-search" id="select2" name="select2">
        @foreach($options as $option)
            <option value="{{ $option->id }}">{{ $option->name }}</option>
        @endforeach
    </select>
</div>

在此模板中，我们正在循环遍历指定的选项数组，并在选项列表中为每个选项创建一个 option 元素。

jQuery 代码

我们需要使用以下 jQuery 代码来初始化 Select2：

$(document).ready(function() {
    $('.select2-search').select2({
        placeholder: 'Select an option',
        allowClear: true
    });
});

使用上述代码后，您的单个可搜索下拉列表应该会正常工作了。

多个可搜索的下拉列表

如果需要在同一页中创建多个可搜索的下拉列表，则需要对上述代码进行更改以防止冲突。

Blade 模板

在 Blade 模板中，我们需要为每个下拉列表添加一个唯一的 id。以下是包含两个下拉列表的 Blade 模板：

<div class="form-group">
    <label for="select2-1">Select2 Searchable Dropdown 1</label>
    <select class="form-control select2-search" id="select2-1" name="select2-1">
        @foreach($options as $option)
            <option value="{{ $option->id }}">{{ $option->name }}</option>
        @endforeach
    </select>
</div>

<div class="form-group">
    <label for="select2-2">Select2 Searchable Dropdown 2</label>
    <select class="form-control select2-search" id="select2-2" name="select2-2">
        @foreach($options as $option)
            <option value="{{ $option->id }}">{{ $option->name }}</option>
        @endforeach
    </select>
</div>

jQuery 代码

在 jQuery 代码中，我们需要对每个下拉列表分别初始化 Select2。以下是包含两个下拉列表的 jQuery 代码：

$(document).ready(function() {
    $('.select2-search').each(function() {
        $(this).select2({
            placeholder: 'Select an option',
            allowClear: true
        });
    });
});

使用上述代码后，您的多个可搜索下拉列表应该会正常工作了。

结论

使用 Laravel Blade 和一些前端技术，创建可搜索的下拉列表变得非常容易。但是，需要在创建多个下拉列表时要小心，以防止冲突。