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