En esta entrada, vamos a ver cómo implementar de una manera sencilla un buscador con autocompletado con un plugin jQuery llamado EasyAutocomplete y Laravel.
Vamos a instalar el plugin que vamos a utilizar (EasyAutocomplete) para el autocompletado. Para instalarlo tenemos varias formas, yo lo voy a instalar desde NPM, también se puede instalar como cualquier otro paquete añadiendo los JS y CSS en el head y ya estaría, en la documentación lo explica.
Para instalarlo con NPM simplemente tenemos que ejecutar el comando:
|
1 |
npm i easy-autocomplete |
Una vez instalado, lo importamos en los ficheros app.js y app.css:
|
1 |
require('easy-autocomplete/dist/jquery.easy-autocomplete') |
|
1 |
@import '~easy-autocomplete/dist/easy-autocomplete'; |
Compilamos los assets, para más información puedes ver el post sobre esto:
|
1 |
npm run dev |
Si todo a funcionado correctamente y la consola no ha mostrado ningún error, significa que ya están incluidos los archivos y podemos utilizar ya la librería EasyAutocomplete en nuestro proyecto. Vamos a ver cómo hacerlo!
Primero de todo, creamos un método en el controlador que será el que nos devolverá los resultados, yo he creado una consulta muy simple que simplemente mira si en el título hay coincidencias con lo que se busca. Esto se puede complicar más y, por ejemplo, en vez de hacer la query con MySQL, hacerla con ElasticSearch, por ejemplo. Pueden ser infinitas las cosas que se pueden hacer, pero para el ejemplo del post es suficiente para mostrar cómo hacerlo. Entonces, en el método creado, yo he puesto este código:
|
1 2 3 4 5 6 7 8 9 |
... public function search(Request $request) { $posts = Post::where('title', 'LIKE', '%'.$request->search.'%')->get(); return \response()->json($posts); } ... |
Hay que tener una ruta para este método:
|
1 |
Route::get('/search', 'PostController@search')→name('posts.search'); |
Vamos a la vista y creamos un input:
|
1 |
<input id="autocomplete-search" /> |
Y añadimos el siguiente código JS:
|
1 2 3 4 5 6 7 |
$("#autocomplete-search").easyAutocomplete({ url: function(search) { return "{{route('posts.search')}}?search=" + search; }, getValue: "title" }); |
En este código, le estamos indicando la ruta a la tiene que hacer la petición (ruta generada anteriormente) con el parámetro search para en el controlador recogerlo y hacer la consulta a la base de datos y en el getValue, le estamos indicando el valor queremos que se muestre en el listado de resultados, en mi caso el title del post.
El resultado sería el siguiente:
Nota: las frases que muestra como resultado las he generado con los seeders para no tener que generarlos a mano, por eso no tienen ningún sentido.
Ahora mismo tenemos el buscador funcionando, pero cuando seleccionamos un resultado no hace nada, por ejemplo, en mi caso, debería llevar a la ruta de ese post (generada en posts anteriores). Vamos a ver como hacer esto.
Para hacer esto, el plugin EasyAutocomplete tiene una función que nos permite obtener los datos del elemento seleccionado (getSelectedItemData) devueltos por el backend y un evento que nos permite capturar cuando el usuario hace click o enter en uno de los resultados mostrados (onChooseEvent).
El código JS quedaría de la siguiente manera:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
$("#autocomplete-search").easyAutocomplete({ url: function(search) { return "{{route('posts.search')}}?search=" + search; }, getValue: "title", list: { onChooseEvent: function() { var selectedPost = $("#autocomplete-search").getSelectedItemData(); window.location = "{{url('post')}}" + "/" + selectedPost.id; } } }); |
Capturamos el evento (onChooseEvent), obtenemos los datos del elemento seleccionado (getSelectedItemData) y redirijimos a la url del post. El resultado sería el siguiente:
Nota: los posts y categorías que muestran como resultado los he generado con los seeders para no tener que generarlos a mano, por eso no tienen ningún sentido.
Y con esto ya tendríamos un buscador simple con autocompletado. El plugin EasyAutocomplete permite customizarlo bastante, en la documentación está todo explicado. Algunas de las cosas que permite customizar son: añadir diferentes temas, modificar el template que se muestra, añadir animaciones, entre otras muchas cosas.
Si hay cualquier tipo de error en el post o te surge cualquier duda, no dudes en ponerlo en los comentarios o enviarme un correo desde la página de contacto.
CONTACTAR