Laravel 5.8 Autocomplete Search Using Typeahead JS

In this tutorial you will learn about the Laravel 5.8 Autocomplete Search Using Typeahead JS and its application with practical example.

Laravel 5.8 Autocomplete Search Using Typeahead JS

In this article, I will show you how to create a dynamic database driven ajax jquery autocomplete using typeahead js in Laravel. In this tutorial we will create a dynamic search dropdown autocomplete which will fetch options from database table using bootstrap typeahead js.

The Typeahead JS is a jquery plugin, it is used to create dynamic autocomplete input with several options. In this example you will learn how to implement typeahead autocomplete in laravel.

Before starting with example I assume that you already have fresh laravel 5.8 installation ready, if you have not installed it yet you can follow laravel 5 installation instruction here.

Install Laravel 5.8

First of all we need to create a fresh laravel project, download and install Laravel 5.8 using the below command

Configure Database In .env file

Now, lets create a MySQL database and connect it with laravel application. After creating database we need to set database credential in application’s .env file.

.env

Create Model and Migration

Now, we have to define table schema for contact table. Open terminal and let’s run the following command to generate a Contact model along with a migration file to create contact table in our database.

Once this command is executed you will find a migration file created under “database/migrations”. Lets open migration file created and put following code in it –

Run Laravel Migration

Now, run following command to migrate database schema.

After, the migration executed successfully the contact table will be created in database.

Create AutoComplete Controller

Next, we have to create a controller for AutoComplete suggestion. Create a controller named AutoCompleteController using command given below –

Once the above command executed, it will create a controller file AutoCompleteController.php in app/Http/Controllers directory. Open the AutoCompleteController.php file and put the following code in it.

app/Http/Controllers/AutoCompleteController.php

Create Blade / View Files

In this step, we will create view/blade file to perform autocomplete Search Using Typeahead JS. Lets create a blade file “search.blade.php” in “resources/views/TypeaheadAutocomplete/” directory and put the following code in it respectively.

resources/views/TypeaheadAutocomplete/search.blade.php

Create Routes

After this, we need to add following routes in “routes/web.php” file. Lets open “routes/web.php” file and add following route.

routes/web.php

Now we are ready to run our example so lets start the development server using following artisan command –

Now, open the following URL in browser to see the output –

http://localhost:8000/search

Output 1:-

laravel-5-autocomplete-search-using-typeahead-js-1

Output 2:-

laravel-5-autocomplete-search-using-typeahead-js-2

 

In this tutorial we have learn about the Laravel 5.8 Autocomplete Search Using Typeahead JS and its application with practical example. I hope you will like this tutorial.