In this tutorial, we will see how to create autocomplete search using typeahead js in laravel 8. We will show example of laravel 8 autocomplete search using typeahead js. We will share with you how to build search autocomplete box using jQuery typehead js with ajax in laravel 8.


Given below is the full example for Laravel 8 ajax autocomplete search using typeahead js



Step 1: Install Laravel 8 Application

We require to get fresh Laravel application using bellow command, So open your terminal OR command prompt and run the command as shown below:

composer create-project --prefer-dist laravel/laravel Laravel8TypeheadTutorial




Step 2: Database Configuration

In this step, configure database with your downloded/installed laravel 8 app. So, you need to find .env file and setup database details as following: 

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=db name
DB_USERNAME=db user name
DB_PASSWORD=db password




Step 3: Add Dummy Record

In this step,I will Generate dummy records into database table users. So, navigate database/seeders/ directory and open DatabaseSeeder.php file and run following code:

use App\Models\User;

User::factory(100)->create();

After that, open command prompt and navigate to your project by using the following command:

cd / Laravel8TypeheadTutorial
Now, open your terminal again and type the following command on cmd to create tables into your selected database:

php artisan migrate
Next, run the following database seeder command to generate dummy data into database:

php artisan db:seed --force



Step 4: Create Routes

Now in this step, open your web.php file, which is located inside routes directory. Then add the following routes into web.php file:

use App\Http\Controllers\AutocompleteSearchController;
Route::get('/autocomplete-search', [AutocompleteSearchController::class, 'index'])->name('autocomplete.search.index');
Route::get('/autocomplete-search-query', [AutocompleteSearchController::class, 'query'])->name('autocomplete.search.query');



Step 5: Creating Auto Complete Search Controller

Here in this step,I will create search AutocompleteSearch controller by using the following command.

php artisan make:controller AutocompleteSearchController

The above command will create AutocompleteSearchController.php file, which is located inside Laravel8TypeheadTutorial/app/Http/Controllers/ directory.

Then add the following controller methods into AutocompleteSearchController.blade.php file:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\User;

class AutocompleteSearchController extends Controller
{
    public function index()
    {
      return view('autocompleteSearch');
    }

    public function query(Request $request)
    {
      $input = $request->all();

        $data = User::select("name")
                  ->where("name","LIKE","%{$input['query']}%")
                  ->get();
   
        return response()->json($data);
    }
}




Step 6: Create Blade File

In step 6, create new blade view file that named autocompleteSearch.blade.php inside resources/views directory for ajax get data from database.

<!DOCTYPE html>
<html>
<head>
  <title>Autocomplete Search Using Typehead | Laravel 8</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="col-md-6 offset-md-3 mt-5">
        <h5>Laravel 8 Autocomplete Search Using Typehead</h5>
        <input type="text" class="form-control typeahead">
      </div>
    </div>
  </div>
</body>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.min.js" ></script>
<script type="text/javascript">
  var path = "{{ url('autocomplete-search-query') }}";
    $('input.typeahead').typeahead({
        source:  function (query, process) {
          return $.get(path, { query: query }, function (data) {
              return process(data);
          });
        }
    });
</script>
</html>


Now we are ready to run our laravel 8 autocomplete search using typeahead js example so run bellow command for quick run:

php artisan serve

Now you can open this URL on your browser:

http://localhost:8000/autocomplete-search


I hope this example helps you.