I'll show you today how to use typeahead js to make autocomplete search in Laravel 9. We'll demonstrate a typeahead js-based Laravel 9 autocomplete search. We will demonstrate how to create a search autocomplete box in Laravel 9 using jQuery Typehead and ajax. I'll utilize the bootstrap library, the jQuery typehead js plugin, and ajax to add search autocomplete to my Laravel 9 application.

Here, I'll offer you a detailed example of how to use typeahead js with Laravel 9's ajax autocomplete search as shown below.

Step 1: Install Laravel 9 Application

Since we are starting from scratch, the following command must be used to obtain a new Laravel application. Open a terminal or a command prompt, then enter the following command:

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

Step 2: Database Configuration

Configure your downloaded/installed Laravel 9 app with the database in this stage. The .env file must be located, and the database setup information is as follows:

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

I'll create fictitious records for database table users in this stage. Open the DatabaseSeeder.php file by going to the database/seeders/ directory. Add the next two lines of code after that.

use App\Models\User;

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

Then, launch command prompt, and use the following command to go to your project:

  cd / Laravel9TypeheadTutorial

Open your terminal once more, and then type the following command on cmd to create tables in the database of your choice:

php artisan migrate

Run the database seeder command after that to create dummy data for the database:

php artisan db:seed --force

Step 4: Create Routes

Open the web.php file, which is found in the routes directory, in this step. Add the following routes to the web.php file after that:

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

The following command will be used to create the search AutocompleteSearch controller in this stage.

php artisan make:controller AutocompleteSearchController

The AutocompleteSearchController.php file will be created by the aforementioned command and placed in the Laravel8TypeheadTutorial/app/Http/Controllers/ directory.

Subsequently, include the following controller methods in AutocompleteSearchController.blade.php:

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

Create a new blade view file called autocompleteSearch.blade.php in the resources/views directory in step 6 so that ajax can access the database.

<!DOCTYPE html>
<html>
<head>
  <title>Autocomplete Search Using Typehead | Laravel 9</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 9 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 that we have our typeahead js example for Laravel 9 autocomplete search running, use the following command for a quick test:

php artisan serve

You can now access the following URL in your browser:

http://localhost:8000/autocomplete-search

Recommended Posts

View All

How To Create Word Document File In Laravel


In Laravel, use the phpoffice/phpword package to create a word document file. In this example, I&amp;#039;ll show you how to create a word document an...

Crop Image Before Upload Using Croppie.js in Laravel 9


Using Laravel 9, crop an image before uploading it using Croppie.js. Before uploading an image, Laravel uses Ajax to crop it with croppie. Cropping an...

Laravel One to One Eloquent Relationship Tutorial


Laravel One To One Eloquent Relationships Tutorial Example, Laravel Eloquent ORM is the best possible database solution, ORM Mapping is very easy, lar...

How to Install Ckeditor in Laravel 9


Laravel 9 ckeditor tutorial example, you will learn how to install or integrate ckeditor and use in laravel 9 app

Laravel 8 Custom 404, 500 Error Page Example


How to create custom error page in Laravel 8 and we will also try to tell you why we required to create the custom error page.