Laravel 8 Autocomplete Search using Typeahead JS Example

Hi Guys,

Today,I will learn you how to create autocomplete search using typeahead js in laravel 8. We will show example of laravel 8 autocomplete search using typeahead js. We will share with you how to build search autocomplete box using jQuery typehead js with ajax in laravel 8.i will use jQuery typehead js plugin, bootstrap library and ajax to search autocomplete in laravel 8 app.

Here, I will give you full example for Laravel 8 ajax autocomplete search using typeahead js as bellow.

Step 1: Install Laravel 8 Application

we are going from scratch, So we require to get fresh Laravel application using bellow command, So open your terminal OR command prompt and run bellow command:


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

Step 2: Database Configuration

In this step, configure database with your downloded/installed laravel 8 app. So, you need to find .env file and setup database details as 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 this step,I will 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 / Laravel8TypeheadTutorial

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

Step 4: Create Routes

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


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

Here in this step,I will create search AutocompleteSearch controller by using the following command.


php artisan make:controller AutocompleteSearchController

The above command will create AutocompleteSearchController.php file, which is located inside

Laravel8TypeheadTutorial/app/Http/Controllers/ directory.

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


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

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


<!DOCTYPE html>
<html>
<head>
  <title>Autocomplete Search Using Typehead | Laravel 8</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 8 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 we are ready to run our laravel 8 autocomplete search using typeahead js example so run bellow command for quick run:


php artisan serve

Now you can open bellow URL on your browser:


http://localhost:8000/autocomplete-search

It will help you..

Laravel Cron Job Task Scheduling Example

Laravel Cron Job Task Scheduling Example Hi Dev In this blog, I will learn how to create Cron Job Task Scheduling in laravel we will give you simple example of cron job task scheduling with laravel. we will create example step by step of cron job using laravel task scheduling. You can easy create a cron job task scheduling in laravel.Why we have to use cron job? and what is benefit to use cron jobs in laravel and how to setup cron job in laravel?, If you have this question then i will explain why.Many times we need to send notifications or send email automatically to users for update property or items. So at that time you can define some basic logic for each days, hours etc can run and send email notification. Here blow the example of cron job task scheduling Step 1 : Install Laravel Application we are going from scratch, So we require to get fresh Laravel application using bellow command, So open your terminal OR command prompt and run bellow command: composer create-project --p...

Laravel Tutorial

Search This Blog

Laravel 8 Autocomplete Search using Typeahead JS Example

Labels

Comments

Popular posts from this blog

Laravel Validation Image Example

React Native Flexbox Tutorial With Example

Laravel Cron Job Task Scheduling Example