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

6 comentarios

Inicia sesión para comentar

Iniciar sesión

Comentarios:

Danilo hace 9 meses

Excelente como de costumbre.
Alejandro Echavarria hace 1 año
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
Kike hace 2 años

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 2 años

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 2 años

¿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 1 año

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 });
},