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


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:


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")
        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>
  <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">
  <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">
<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') }}";
        source:  function (query, process) {
          return $.get(path, { query: query }, function (data) {
              return process(data);

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:


Recommended Posts

View All

Unlocking the Power of Data Visualizing Laravel App Data with Chartello

Discover the potential of data visualization with Chartello, a Laravel app that helps you unlock insights from your data. Try it now and see the resul...

How to install Adminer in Laravel application

In this article we will install Adminer in Laravel 8 application

Laravel 9 FullCalendar Ajax Tutorial with Example

We&amp;#039;ll show you how to use the Fullcalendar JavaScript event calendar plugin to add FullCalendar to your Laravel app and create and cancel eve...

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

Laravel Has Many Through Eloquent Relationship

Laravel has many through pivot table, Laravel has many through relationship example, has_many through relationship Laravel, hasmanythrough laravel inv...