Adquiere este curso para tener acceso a todas las lecciones

89. Cómo implementar un buscador en Laravel con Inertia

En este capítulo, se te enseñará a agregar un buscador a la lista de registros. Aprenderás a utilizar el método filter de la librería de paginación de Inertia para realizar búsquedas en la lista de registros.

Marcar esta unidad como culminada

Tema anterior Siguiente tema

7 comentarios

Inicia sesión para comentar

Iniciar sesión

Comentarios:

Danilo hace 5 meses

Excelente como de costumbre.
Alejandro Echavarria hace 11 meses
Para los que usan vite en vez de NPM o una versión de las nuevas como por ejemplo laravel 10, deben instalar la dependencias de lodash:
npm install --save-dev @types/lodash npm install --save lodash
álvaro Parra hace 1 año

Hola Victor, me puedes por favor ayudar: ¿sabes por qué a mí no me aparece la carpeta ‘Jetstream’?
cómo hago para instalarla ??
Gracias (estoy trabajando con la última versión de laravel y de php) !
- álvaro Parra hace 1 año
  
  … y algo mas Victor, cómo se usa ahora el ‘pickBy’ ya que no funciona, genera error
- Victor Arana Flores hace 1 año
  
  Hola Alvaro, puedes ser más especifico en tus preguntas por favor.
- álvaro Parra hace 1 año
  
  Si el curso se mantiene activo/disponible en cuanto a la venta, así mismo debería serlo el Soporte e intentar querer ayudar un poco más. En lo primero no puedo ser mas claro, en lo segundo hago referencia al 'pickBy' que usas en el Minuto 04:08, pero que ya no aparece en las nuevas versiones y al parecer ya no trabaja, y no logro cómo reemplazarlo. De antemano muchas gracias !
- Cfig hace 1 año
  
  Hola Alvaro, no te aparece la carpeta Jetstream por que seguramente estás usando una versión actual de Larvel, y según he visto, componentenes que antes estaban en dicha carpeta ahora están en la carpeta Components.
Kike hace 1 año

Hola Victor, estoy haciendo pruebas con script setup, pero no consigo hacerle funcionar. ¿puedes hacer un vídeo con la adaptación del Proyecto a Script Setup (lecciones a partir de la 79). Utilizar los props, data, funciones watch, etc.
Un Saludo,
Jose Castillo hace 1 año

Hola Victor. El valor de search se pierde cuando se cambia de pagina. Como se podría hacer para mantener el valor?
Vitervo Lopez Caballero hace 1 año

¿Cómo sería la implementación con Vue 3? Porque veo que estás utilizando la Api de Opciones y no la la Api de Composition.

Danilo Vega hace 2 años

Cuando la busqueda encuentra mas de 2 paginas al pasar a la segunda pagina de la busqueda se quita la busqueda y conduce a la segunda pagina de la lista, como se puede hacer para que se mantenga la busqueda ???

Alejandro Echavarria hace 11 meses

Para el que le pueda servir
Estoy usando Vue3 y laravel 10 con inertia

Yo lo hice de la forma que Victor lo hizo en los capítulos de paginación solo que hay que llevarlo a la forma que trabaja inertia.

Básicamente lo que hice fue crear un metodo en el componente de paginación:

export default {
    props: {
        pagination: {
            type: Object,
            required: true
        }
    },


    methods: {
        changePage(url) {
            const page = url.split('?page=')[1];
            this.$inertia.visit(this.$inertia.page.url, {
                replace: true,
                preserveState: true,
                data: {
                    page: page
                }
            });
        }
    }
}

Luego en vez de usar el componente Link hago uso de la etiqueta <a> y llamo al metodo changePage mediante el evento click:

<a v-else :key="'links-' + index"
	@click="changePage(link.url)" href="#"
    class="relative inline-flex items-center px-4 py-2 text-sm font-semibold text-gray-900 focus:z-20"
    :class="link.active
    	? 'z-10 border-b-2 border-indigo-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 focus:outline-none focus:border-indigo-700 transition duration-150 ease-in-out'
        : ''" v-html="link.label" />

Luego en la vista index le paso el segundo parámetro de la siguiente manera:

contactsFilter(){
	this.$inertia.get('/contacts', pickBy({ search: this.search, page: this.page }), { preserveState: true });
},