README

KeSelect 是一个具有优雅搜索自动填充功能的 TALL Stack 下拉选择器。

我创建这个组件是因为很难找到关于 TALL Stack 的相关内容。该组件模仿了许多其他可用插件（如 Select2、SelectJS、TomSelect、SelectizeJS 等）的主要功能。我只是不喜欢走安装多个其他包和 jQuery 的路（不用谢谢）。

要求

• PHP v8.1
• Laravel v10
• Livewire v3
• TailwindCSS
• AlpineJS

KeSelect 使用纯 Laravel、Livewire、AlpineJS 和 TailwindCSS 来实现简单的下拉选择功能，直接从后端获取数据。组件可以根据需要以“laravelly”的方式正常自定义。

安装

您可以使用 composer 安装 KeSelect。

composer require jeremykes/keselect

快速开始

安装组件后，将其包含在您的 blade 应用程序中即可。例如（假设我们有一个变量 $search_columns = ['name', 'description', 'title'];

<livewire:ke-select :searchableModel="'Customers'" :searchableColumns="$search_columns" />

组件有两个必需变量；searchableModel 和 searchableColumns。它们的说明如下。

文档

属性说明

• :searchableModel (必需) - 此名称必须与您希望执行搜索的模型名称完全匹配。如果不存在，组件将抛出错误。例如，如果您有一个 Customers 模型：:searchableModel="'Customers'"。
• :searchableColumns (必需) - 这是一个包含您希望在模型上执行搜索的列名称的数组。如果模型中不存在任何列，组件将抛出错误。此示例格式为：['name', 'description']。
• :minSearchLength（可选）- 这是触发搜索之前需要输入的最小字符数。默认值为 3。例如，如果您想在第五个字符后触发搜索：:minSearchLength="'5'"。
• :primaryDisplay（可选）- 这是您希望在搜索结果中突出的列值。如上 GIF 所示，primaryDisplay 列值在第一行加粗显示，而其他列值以稍小的字体列在下面。这也是在输入表单中显示的值。如果没有定义，则使用 searchableColumns 数组中的第一个值作为 primaryDisplay。例如，如果您想 description 成为突出的值：:primaryDisplay="'description'"。
• :optionID（可选）- 如果您的模型 ID 不是 id（例如您使用 UUID），则需要定义它以便引用正确的 ID。如果没有提供 optionID，则默认为 id。如果组件在模型中找不到这两个定义，将抛出错误。例如，如果您使用 UUID，则将其定义为：:optionID="'UUID'"。

在 KeSelect 组件中，selectedOptionId 是由组件建模的，以便在父组件中引用。这是为了允许在从下拉搜索结果中选择相关选项后，将 ID 可用性提供给父组件。您可以在父组件中这样引用它

<livewire:ke-select :searchableModel="'Customers'" :searchableColumns="$search_columns" wire:model.live="selectedCustomerId" />

如果 selectedCustomerId 在初始化时被设置（非 NULL），组件将尝试使用该 ID 初始化下拉输入框。这对于“编辑”或“阅读”页面非常有用，在这些页面上您需要初始化组件以具有预选值。

这是模型声明

namespace App\Livewire\Components;

use Livewire\Attributes\Modelable;
use Livewire\Attributes\On;
use Livewire\Component;
use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Eloquent\Model;
use Livewire\Attributes\Reactive;

class KeSelect extends Component
{
    #[Reactive] public $searchableColumns;
    #[Modelable] public $selectedOptionId;
    public $selectedOption = null;
    public $options = [];
    public $search = '';
    public $minSearchLength = 3;

    public $searchableModel;
    public $primaryDisplay;
    public $optionID;
    public $searchDisplay;
    public $modelName;

样式

默认包含 TailwindCSS 的浅色和深色主题。样式相当标准，可以根据需要自定义。

许可证

MIT 许可证 (MIT)。

未来

多选

我尚未将多选添加到组件中，但将在不久的将来添加。我会看看效果如何。

测试

我也没有对这个组件进行过广泛的测试，所以请自行承担风险使用。

最后思考

这是一个有趣的周末小项目，如果您想进行合作或任何其他事情，请告诉我！我希望这个组件对您非常有用。