Laravel 10 Typeahead Js Create Autocomplete Search Tutorial

If you’re looking to add autocomplete search functionality to your Laravel 10 web application using the Typeahead.js library, this tutorial is perfect for you. In this step-by-step guide, you will learn how to integrate and utilize Typeahead.js to create an autocomplete search feature that retrieves suggestions from a database in your Laravel 10 app using Ajax.

Autocomplete search is a common requirement in web applications, providing users with real-time suggestions as they type, enhancing search efficiency and user experience. With ajax and Typeahead.js, you can easily implement this functionality and retrieve suggestions from your database.

Laravel 10 Typeahead Js Autocomplete Search Example

By using the following steps, you can create autocomplete search functionality in your Laravel 10 web application using ajax and Typeahead.js library:

Step 1 – Setup New Laravel 10 App
Step 2 – Configure Database with Laravel App
Step 3 – Generate Fake Records
Step 4 – Define Routes
Step 5 – Create Controller & Methods
Step 6 – Create Blade View
Step 7 – Start Development Server
Step 8 – Test This App

Step 1 – Setup New Laravel 10 App

First of all, Open your temrinal or command prompt.

Then you need to execute the following command into it download or install Laravel 10 new setup in your server:

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

Step 2 – Configure Database with Laravel App

Once you have installed laravel app on your server. Now, you need to configure your database with your apps.

So, visit your app root directory and find .env file. Then configure database details as follows:

 DB_CONNECTION=mysql 
 DB_HOST=127.0.0.1 
 DB_PORT=3306 
 DB_DATABASE=here your database name here
 DB_USERNAME=here database username here
 DB_PASSWORD=here database password here

Step 3 – Generate Fake Records

Before adding fake records in the database first migrate the table in database using the below command:

php artisan migrate

Add fake records in our database. use the below command and add 100 fake records in database:

php artisan tinker 

factory(App\Models\User::class, 100)->create();

Step 4 – Define Routes

Now you need to define two routes in the web.php file, one for show the search input box and the second for autocomplete search using the jquery typeahead js autocomplete method:

use App\Http\Controllers\AutoCompleteController;

Route::get('search', [AutoCompleteController::class, 'index']);
Route::get('autocomplete', [AutoCompleteController::class, 'search']);

Step 5 – Create Controller & Methods

Execute the following command on terminal to create a controller name AutoCompleteController.php file:

php artisan make:controller AutoCompleteController

Once you have created the controller file, then go to app/controllers/AutoCompleteController.php and add the below code into it:

<?php

namespace App\Http\Controllers;

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

class AutoCompleteController extends Controller
{

    public function index()
    {
        return view('search');
    }

    public function search(Request $request)
    {
          $search = $request->get('term');
     
          $result = User::where('name', 'LIKE', '%'. $search. '%')->get();

          return response()->json($result);
           
    } 
}

Step 6 – Create Blade View

In this step, you need to create a blade view file. So, Go to app/resources/views and create one file name search.blade.php.

After creating blade file, then add the below HTML code with typehead js and css library file into it:

<!DOCTYPE html>
<html>
<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>Autocomplete Search Using Typeahead JS - Tutsmake.com</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />
  <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>
 <style>
    .container{
    padding: 10%;
    text-align: center;
   } 
 </style>
</head>
<body>

<div class="container">
    <div class="row">
        <div class="col-12"><h2>Laravel AutoComplete Search Using Typeahead JS</h2></div>
        <div class="col-12">
            <div id="custom-search-input">
                <div class="input-group">
                    <input id="search" name="search" type="text" class="form-control" placeholder="Search" />
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    var route = "{{ url('autocomplete') }}";
    $('#search').typeahead({
        source:  function (term, process) {
        return $.get(route, { term: term }, function (data) {
                return process(data);
            });
        }
    });
</script>
  
</body>
</html>

This script code will work to search data from the database and return data to our view file using Ajax method full to create autocomplete search example.

Step 7 – Start Development Server

Execute the following command on Terminal to start the development server:

 php artisan serve

 If you want to run the project diffrent port so use this below command 
 
 php artisan serve --port=8080

Step 8 – Test This App

Open browser and hit the following URL on it:

Http://localhost:8000/search

Conclusion

By following this tutorial, you will gain the knowledge and skills to create autocomplete search functionality in your Laravel 10 web application using the Typeahead.js library. You will be able to enhance your application’s search capabilities, providing users with a seamless and efficient search experience.

Runing Demo

Subscribe to Blog via Email