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

Laravel Eloquent Query - Laravel whereKey method

We'll look at the whereKey method in Laravel Eloquent in this post. whereKey is an extremely easy-to-use tool with a lot of potential.

Laravel 9 Stripe Payment Gateway Integration Example

Stripe payment gateway for Laravel 9; I'll demonstrate how to include Stripe payment gateway into Laravel 9 apps in this tutorial.

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.

Laravel 9 Socialite Login with LinkedIn Tutorial Example

How to use the Laravel socialite, Livewire, and Jetstream libraries to create a LinkedIn login system from scratch in Laravel

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