Search automatically in Laravel using jQuery Autocomplete

Tram Ho

Surely, you all hear about search autocomplete, which is a way to automatically suggest words as we type to perform a search feature to facilitate the search more accurately as well as improve the user experience. . This feature has been and is being applied by many websites (you must search google right. That’s it).
In fact, there are many libraries that support us in this search (eg typeahead, Easyautocomplete, Horsey, …). Depending on the project needs, I choose and use the library accordingly.
No more rambling, today I would like to guide you to use the jQuery Autocomplete library to implement this feature.
Let’s get started.

Step 1: Install the Laravel application

You enter the command type the following command to create the project

Step 2: Create a table, Cake model and sample data for it.

1. First create the migrate file to create the cakes table

It will generate file create_cakes_table.php in the path “database / migrations” and we will go into that file and copy the following content:

After running the following command to create the cake table:

2. Create a Cake model
Type the following command to create the model:

It will generate Cake.php in app / Cake.php and in that file copy the following content:

3. Create sample data for the cakes table.
In turn type the following commands:

It will generate CakeSeederTable.php and CakeFactory.php files and modify the contents of the two files as follows:


Then go to the DatatableSeeder.php file to edit the content as follows:

Finally run the following command to create sample data:

Step 3: Install the jQuery-Autocomplete library

You can use the following 3 ways:

Step 4: Build route, Controller, View

1. Build a route

Go to web.php and add the following route:

2. Build controller

Create controller CakeController with the following command:

Edit the content of CakeController file to (here I search according to the name of cakes):

3. Build file view

Here I created the index.blade.php file with the following content:

Above I have integrated the CDN jquery autocomplete :

<script src = “”> </script>

To use the library, we will call the autocomplete as follows:

serviceUr l: Ajax call path and response must return json data in the following format:

transformResult : Will reformat the return value when calling ajax to retrieve data as well as the correct return format that the library requires to display the correct suggestion when typing a search.
onSelect : When clicking a suggestion box will do.

Especially we can also customize css for suggestion boxes:
-The default library will render the following html:

-So we can customize the css like our post as follows:

There are many other options depending on the requirements you can refer to in:

Step 5: See the results

Run the following command and go to the link http: // localhost: 8000 / demo-search:

Let’s see which achievement:


Above is what I learned about the jQuery-Autocomplete library.
Hoping to help you with projects and school assignments …
Good luck.!

Share the news now

Source : Viblo