Laravel 8 Ajax Autocomplete Search using Typeahead JS Example

by

Laravel 8 jquery typehead js for search autocomplete box. In this post, i will share with you how to build search autocomplete box using jQuery typehead js with ajax in laravel 8.

In this example post, i will use jQuery typehead js plugin, bootstrap library and ajax to search autocomplete in laravel 8 app.

This laravel 8 jQuery typehead js search autocomplete app will look like in following image:

Laravel Typeahead JS – Autocomplete Search Example

  • Step 1 – Install Laravel 8 Application
  • Step 2 – Database Configuration
  • Step 3 – Add Dummy Record
  • Step 4 – Create Routes
  • Step 5 – Creating Auto Fill Search Controller and Method
  • Step 6 – Create Blade File
    • Create Autocomplete Search Input Input Box
    • Add  jquery typeahead js plugin in form
    • Add ajax typehead js code for search
  • Step 7 – Start Development Server
  • Step 8 – Run Laravel 8 jQuery Ajax Typehead Search Example App On Browser

Step 1 – Install Laravel 8 Application

In step 1, open your terminal and navigate to your local web server directory using the following command:

//for windows user
cd xampp/htdocs

//for ubuntu user
cd var/www/html

Then install laravel 8 latest application using the following command:

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

Step 2 – Database Configuration

In step 2, open your downloaded laravel 8 app into any text editor. Then find .env file and configure database detail like 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 step 3, Generate dummy records into database table users. So, navigate database/seeders/ directory and open DatabaseSeeder.php file. Then add the following two line of code it:

use App\Models\User;

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

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

cd / LaravelTypeheadExample

Now, open again your terminal 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

Step 4 – Create Routes

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

Route::get('typehead-autocomplete', [SearchAutoCompleteController::class, 'index']);
Route::get('search-auto-db', [SearchAutoCompleteController::class, 'searchQuery']);

Step 5 – Creating Auto Fill Search Controller and Method

In step 5, create search autocomplete controller by using the following command:

php artisan make:controller SearchAutoCompleteController

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

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

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Models\User;

class SearchAutoCompleteController extends Controller
{
        /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        return view('search-autocomplete');
    }
  
    /**
     * Show the form for creating a new resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function searchQuery(Request $request)
    {
        $data = User::select("name")
                ->where("name","LIKE","%{$request->get('query')}%")
                ->get();
   
        return response()->json($data);
    }
}

Step 6 – Create Blade File

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

  • Create Autocomplete Search Input Input Box 
<div class="container mt-3">
    <h1 class="mb-3">Laravel 8 Autocomplete Search using Bootstrap Typeahead JS - LaraTutorials</h1>   
    <input class="typeahead form-control" type="text">
</div>
  • Add  jquery typeahead js plugin in form
 <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>
  • Add ajax typehead js code for search

The following jQuery typehead js plugin library will help to design textbox and customize ajax search code:

   <script type="text/javascript">
    var path = "{{ url('search-auto-db') }}";
    $('input.typeahead').typeahead({
        source:  function (query, process) {
        return $.get(path, { query: query }, function (data) {
                return process(data);
            });
        }
    });
</script>

The following jQuery typhead js plugin and ajax code will search and autocomplete data from database in laravel:

<script type="text/javascript">
    var path = "{{ url('search-auto-db') }}";
    $('input.typeahead').typeahead({
        source:  function (query, process) {
        return $.get(path, { query: query }, function (data) {
                return process(data);
            });
        }
    });
</script>

Don’t worry i have already added the jQuery typehead js and ajax code and library to search and autocomplete data from database in laravel on forms.

The full source code of search-autocomplete.blade.php file:

<!DOCTYPE html>
<html>
<head>
    <title>Laravel 8 Typehead Search Autocomplete Example - LaraTutorials.com</title>

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

    <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>

</head>
<body>
   
<div class="container mt-3">
    <h1 class="mb-3">Laravel 8 Autocomplete Search using Bootstrap Typeahead JS - LaraTutorials</h1>   
    <input class="typeahead form-control" type="text">
</div>
   
<script type="text/javascript">
    var path = "{{ url('search-auto-db') }}";
    $('input.typeahead').typeahead({
        source:  function (query, process) {
        return $.get(path, { query: query }, function (data) {
                return process(data);
            });
        }
    });
</script>
   
</body>
</html>

Step 7 – Start Development Server

Finally, open your command prompt again and run the following command to start development server:

php artisan serve

Step 8 – Run Laravel 8 jQuery Ajax Typehead JS Search Example App On Browser

In step 8, open your browser and fire the following url into your browser:

http://127.0.0.1:8000/typehead-autocomplete

When you fire the above given url on browser. So, you will look like laravel 8 typehead js search and autocomplete data will look like in following image:

laravel-8-typhead-js-search-autocomplete
laravel-8-typhead-js-search-autocomplete

Leave a Comment