README

基于 https://github.com/bastinald/laravel-bootstrap-components 的组件

安装

运行 composer 安装此包

composer require thiktak/laravel-bootstrap-component-select2

包含 CSS

在您的 resources/scss/app.scss 中包含以下行

@import 'vendor/thiktak/laravel-bootstrap-component-select2/resources/scss/select2';

包含 JavaScript

在您的 resources/js/app.js 中包含以下行

require('../../vendor/thiktak/laravel-bootstrap-component-select2/resources/js/select2');

运行 NPM

npm run dev

在您的 blades 中使用组件

<x-bs::select2 :label="__('User')" :options="['1' => 'Admin']" what="User" wire:model.defer="user_id" />

此 bs::select2 组件使用了 https://github.com/bastinald/laravel-bootstrap-components 中的 bs:select 组件。您可以使用此组件的所有选项。

这里，重要的是 what="Model"，其中 Model = App\Models\User 或 User

配置您的模型

实现 Select2Searchable 特性
填充受保护的变量 $search2Fields，其中包含要添加到 where 闭包中的列的列表
如果您希望有美观的输出，实现 __toString() 模型方法

use Thiktak\LaravelBootstrapComponentSelect2\Models\Search2Proxies\Select2Searchable;

class User extends Model
{
    use Select2Searchable;

    // Will use magic search
    protected $search2Fields = ['name', 'title'];

    // [...]

}

如果需要，您可以重新定义 search2 和 search2_export 方法。

您还可以创建一个代理并构建自己的查询。Select2Proxy 自动实现 Select2Searchable 特性。代理应位于 App\Models\Search2Proxies 目录。

namespace App\Models\Search2Proxies;

use Thiktak\LaravelBootstrapComponentSelect2\Models\Search2Proxies\Select2Proxy;

class UserProxy extends Select2Proxy
{
    /*
     * protected $search2Fields = ['name', 'title'];
     */

    /**
     * METHOD getModel
     *----------------
     * Define your own model
     * Used by magic method select2, if not overwritten
     */
    public function getModel() {
        return new \App\Models\User;
    }

    /**
     * Method Select2
     *----------------
     * Will return a query object based on the keyword searched
     * ... or the ID provided
     */
    public function select2($id, $term) {
        return $this->getModel()
            ->query()
            // Search by ID
            ->when($id, function($q) use($id) {
                // no return
                $q->find($id);
                // OR $q->where($this->getModel()->getPrimaryKey(), $id)
            })
            ->when(!$id, function($q) use($term) {
                return $q
                    ->where('name', 'like', '%' . $term . '%')
                    ->orderBy('name');
            });
    }


    /**
     * Method Export_select2
     * Will export array data based on Select2 format id/text
     */
    public function export_select2(User $user) {
        // id   => '1'
        // text => 'Admin (user@example.net)'
        return [
            'id'   => $user->id,
            'text' => sprintf('%s (%s)', $user->name, $user->email),
        ];
    }

    // [...]

}

测试 API

您可以通过直接打开 /api/select2/search?what=User&q=a 来测试导出到 select 的数据。如果需要，您可以使用 {{ route('api.select2.search') }}

参数

what = 要使用的模型（例如：User 或 App\Models\User）
q = 搜索关键字

输出

results: [{id: 1, text: "label"}]
error: { code: 200, message: null }

使用错误代码来了解发生了什么。

待办事项

为模型使用代理（App\Models\Search2ProxiesProxy）

变更日志

添加了 select2/autoload 值（通过 API 获取数据以保持标签同步）
添加了通过 ID 或通过术语获取数据的功能
添加了代理模型

thiktak / laravel-bootstrap-component-select2

维护者

详情