Cómo implementar un buscador en Laravel con Inertia
Comprar curso

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.


7 comentarios

Inicia sesión para comentar

Comentarios:

  • Danilo

    Danilo hace 7 meses

    Excelente como de costumbre. 

  • Alejandro Echavarria

    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

     

  • álvaro Parra

    á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

    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

    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

    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

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