In this tutorial, we are going to implement autocomplete search using typeahead.js. Typeahead Js is an eloquent javascript library is profoundly used for building autocomplete feature in your application. It is an essential tool and provides suggestions at blazingly fast speed especially when users starts typing a query in autocomplete box.

Setting up the Project

First you need to create a new laravel project by running below command in your terminal
1
composer create-project laravel/laravel laravel-auto-complete-search

Then navigate to your project directory by using below command in your terminal

1
cd laravel-auto-complete-search

Set up Database details

Now you need to configure your Database details in your .env file. 
1
2
3
4
5
6
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel_autocomplete
DB_USERNAME=root
DB_PASSWORD=

Create Controller

Now we need to create TypeaheadController and add following code on that file: 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<?php

namespace App\Http\Controllers;

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

class TypeaheadController extends Controller
{
    public function index()
    {
        return view('welcome');
    }

    public function autocompleteSearch(Request $request)
    {
        $query = $request->get('query');
        $filterResult = User::where('name', 'LIKE', '%'. $query. '%')->get();
        return response()->json($filterResult);
    }
}

Create View

Add below code to your welcome.blade.php file in resources/views directory and paste this code in it: 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>Laravel Typeahead JS Autocomplete Search</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" />
    <style>
        .container {
            max-width: 600px;
        }
    </style>
</head>

<body>

    <div class="container mt-5">
        <div classs="form-group">
            <input type="text" id="search" name="search" placeholder="Search" class="form-control" />
        </div>
    </div>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.1/bootstrap3-typeahead.min.js">
    </script>
    <script type="text/javascript">
        var route = "{{ url('autocomplete-search') }}";
        $('#search').typeahead({
            source: function(query, process) {
                return $.get(route, {
                    query: query
                }, function(data) {
                    return process(data);
                });
            }
        });
    </script>

</body>

</html>

Create Route

Change your web.php file according to this: 
1
2
3
4
5
6
7
8
<?php

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\TypeaheadController;

Route::get('/', [TypeaheadController::class, 'index']);
Route::get('/autocomplete-search', [TypeaheadController::class, 'autocompleteSearch']);

Run the application

To run your application run below command in your termial: 
1
php artisan serve

Then navigate to following URL:

1
http://127.0.0.1:8000/

Conclusion

In this tutorial, we learned how to implement auto-complete search Laravel using Typeahead.js. If you have any issue regarding this tutorial, mention your issue in comment section or reach me through my E-mail. You can obtainf the complete source code from this GitHub repository.