README

Este paquete proporciona un componente Blade reutilizable que actúa como un <select> personalizado con búsqueda difusa utilizando Fuse.js, compatible con Laravel 10, 11 y 12, Bootstrap 5 y Livewire (opcional).

⚙️ Requisitos

• PHP 8.1 o superior
• Laravel 10/11/12
• Node.js y NPM
• Vite
• Bootstrap 5
• fuse.js (instalado vía NPM)

🚀 Instalación

1. Instala el paquete vía Composer:

composer require castellanos/laravel-fuzzy-search

1. Instala la dependencia JavaScript en tu proyecto Laravel:

npm install fuse.js

1. Publica el archivo JavaScript para Vite:

php artisan vendor:publish --tag=fuzzy-js

Resultado:

→ resources/js/vendor/fuzzySearch.js

1. Importa el archivo JS en tu archivo resources/js/app.js:

import './vendor/fuzzySearch';

1. Compila tus assets con Vite:

npm run dev

1. Importar CSS/SCSS, JS:

@vite(['resources/scss/app.scss', 'resources/js/app.js'])

🧪 Uso del componente

Puedes utilizar el componente en cualquier vista Blade, por ejemplo:

<x-fuzzy-select
    label="Usuario"
    input-id="busquedaUsuarios"
    list-id="resultadosUsuarios"
    item-selector="usuario-item"
    :items="$usuarios"
    :keys="['name', 'email']"
    placeholder="Buscar usuario..."
    :open="false"
/>

🔑 Parámetros disponibles

💡 Características

• Componente Blade dinámico y reutilizable
• Búsqueda difusa con Fuse.js
• Estilizado con Bootstrap 5
• Apertura y cierre del dropdown con clic
• Resaltado inteligente con <mark>
• Soporte para múltiples instancias en la misma vista
• Compatible con Livewire ⚡

📄 Licencia

Este paquete está bajo la licencia MIT.

Desarrollado con 💙 por Oscar Castellanos