Download Laravel App
composer create-project --prefer-dist laravel/laravel my-app
C:\xampp\htdocs\laravel>composer create-project --prefer-dist laravel/laravel my-app
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 UserController
php artisan make:controller UserController
C:\xampp\htdocs\laravel\my-app>php artisan make:controller UserController
app\Http\Controllers\UserController.php
//app\Http\Controllers\UserController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\User;
class UserController extends Controller
{
public function index(){
return view('/user');
}
public function search(Request $request){
if($request->ajax()){
$data=User::where('id','like','%'.$request->search.'%')
->orwhere('name','like','%'.$request->search.'%')
->orwhere('email','like','%'.$request->search.'%')->get();
$output='';
if(count($data)>0){
$output ='
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Name</th>
<th scope="col">Email</th>
</tr>
</thead>
<tbody>';
foreach($data as $row){
$output .='
<tr>
<th scope="row">'.$row->id.'</th>
<td>'.$row->name.'</td>
<td>'.$row->email.'</td>
</tr>
';
}
$output .= '
</tbody>
</table>';
}
else{
$output .='No results';
}
return $output;
}
}
}
php artisan tinker User::factory()->count(25)->create()
C:\xampp\htdocs\laravel9\blog>php artisan tinker
Psy Shell v0.11.1 (PHP 8.0.13 — cli) by Justin Hileman
>>> User::factory()->count(20)->create()
[!] Aliasing 'User' to 'App\Models\User' for this Tinker session.
check database table user 25 dummy records added
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
resources/views/user.blade.php
//resources/views/user.blade.php
<!DOCTYPE html>
<html lang="en">
<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">
<title>Laravel Autocomplete Search Box</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container" style="margin-top: 50px;">
<div class="row">
<div class="col-lg-3"></div>
<div class="col-lg-6">
<h3 class="text-center">Laravel Autocomplete Search Box</h3><hr>
<div class="form-group">
<h4>Type by id, name and email!</h4>
<input type="text" name="search" id="search" placeholder="Enter search name" class="form-control" onfocus="this.value=''">
</div>
<div id="search_list"></div>
</div>
<div class="col-lg-3"></div>
</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/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script>
$(document).ready(function(){
$('#search').on('keyup',function(){
var query= $(this).val();
$.ajax({
url:"search",
type:"GET",
data:{'search':query},
success:function(data){
$('#search_list').html(data);
}
});
//end of ajax call
});
});
</script>
</body>
</html>
Routes routes/web.php
//routes/web.php
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\UserController;
Route::get('/', function () {
return view('welcome');
});
Route::get("/home",[UserController::class,'index']);
Route::get("/search",[UserController::class,'search']);
Run C:\xampp\htdocs\laravel\my-app>php artisan serve Starting Laravel development server: http://127.0.0.1:8000
