article

Thursday, July 21, 2022

Laravel 9 Autocomplete Search using Typeahead JS

Laravel 9 Autocomplete Search using Typeahead JS

How to install laravel 9

https://tutorial101.blogspot.com/2022/02/how-to-install-laravel-9.html

Connecting our Database

open .env file root directory.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laraveldb
DB_USERNAME=root
DB_PASSWORD=

Create Controller

php artisan make:controller AutocompleteController
C:\xampp\htdocs\laravel\laravelproject>php artisan make:controller AutocompleteController
change it with the following codes:
laravelproject\app\Http\Controllers\AutocompleteController.php
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
//laravelproject\app\Http\Controllers\AutocompleteController.php
<?php
 
namespace App\Http\Controllers;
 
use Illuminate\Http\Request;
use App\Models\User;
 
class AutocompleteController extends Controller
{
    public function index()
    {
        return view('autocomplete');
    }
  
    public function autocompleteSearch(Request $request)
    {
          $query = $request->get('query');
          $filterResult = User::where('name', 'LIKE', '%'. $query. '%')->get();
          return response()->json($filterResult);
    }
}
Register New Route
laravelproject\routes\web.php
?
1
2
3
4
5
6
7
8
9
10
11
12
//laravelproject\routes\web.php
<?php
 
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\AutocompleteController;
 
Route::get('/', function () {
    return view('welcome');
});
 
Route::get('/home', [AutocompleteController::class, 'index']);
Route::get('/autocomplete-search', [AutocompleteController::class, 'autocompleteSearch']);
Create Test Records in Database
Laravel Tinker used for creating fake data

First, run the laravel migration.

Database Migration
php artisan migrate

C:\xampp\htdocs\laravel\laravelproject>php artisan migrate
Migration table created successfully.
check database table

Create tables Model

php artisan tinker
C:\xampp\htdocs\laravel\laravelproject>php artisan tinker
User::factory()->count(300)->create()

Create Views
laravelproject\resources\views\autocomplete.blade.php

Bootstrap 5
https://getbootstrap.com/docs/5.0/getting-started/introduction/
https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css

Jquery
https://jquery.com/download/
CDN : jsDelivr CDN
https://www.jsdelivr.com/package/npm/jquery
https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js

bootstrap-3-typeahead
Bootstrap 3 Typeahead: The typeahead autocomplete plugin for Twitter's Bootstrap 2 ready to use with Bootstrap 3.
https://cdnjs.com/libraries/bootstrap-3-typeahead
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
//laravelproject\resources\views\autocomplete.blade.php
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>Laravel 9 Autocomplete Search using Typeahead JS</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" />
</head>
<body>
    <div class="container mt-5">
        <p><h1>Laravel 9 Autocomplete Search using Typeahead JS</h1></p>
        <div classs="form-group" style="width: 500px;">
            <input type="text" id="search" name="search" placeholder="Search" class="form-control" />
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.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 route = "{{ url('autocomplete-search') }}";
        $('#search').typeahead({
            source: function (query, process) {
                return $.get(route, {
                    query: query
                }, function (data) {
                    return process(data);
                });
            }
        });
    </script>
</body>
</html>
Run C:\xampp\htdocs\laravel\laravelproject>php artisan serve
Starting Laravel development server: http://127.0.0.1:8000
Posted by ednalan at 1:02 AM . Under .

Related Post