Hi Developers,
Lets learn How To Create Autocomplete Search In Laravel 9. Initially lets create the input form and also the javascript function which gets triggered on typing the input text.
Also create the route that gets the input data and matches the data with the database records using the like Query . Using the route send the ontype function send the input data along with the request and the controller fetches the matching record and send the response back . The script function recieves the response and displays as the suggestions to autocomplete
Lets create a new project by using command
laravel new autocompleteLets add the necessary routes in
web.php
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\UserController;
Route::get('/', function () {
return view('welcome');
});
Route::get('search', [UserController::class, 'search']);
Route::get('autocomplete', [UserController::class, 'autocomplete'])->name('autocomplete');Lets create a new controller by using command
php artisan make:controller UserControllerLets write code in UserController
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\User;
use DB;
class UserController extends Controller
{
public function search()
{
return view('user');
}
public function autocomplete(Request $request)
{
$data = User::select("name")
->where("name","LIKE","%{$request->str}%")
->get('query');
return response()->json($data);
}
}Lets create a new Blade file
user.blade.php
<!DOCTYPE html>
<html>
<head>
<title>How To Create Autocomplete Search In Laravel 9 - ITSolutionsGuides</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.1/bootstrap3-typeahead.min.js"></script>
</head>
<body>
<div class="container">
<h2 style="margin: 30px 0px; text-align: center;">How To Create Autocomplete Search In Laravel 9 - ITSolutionsGuides</h2>
<input class="search form-control" type="text" placeholder="Search here...">
</div>
<script type="text/javascript">
var path = "{{ route('autocomplete') }}";
$('input.search').typeahead({
source: function (str, process)
{
return $.get(path, { str: str }, function (data) {
return process(data);
});
}
});
</script>
</body>
</html>We hope it helps everyone. Thanks for supporting ITSolutionsGuides and keep supporting us also follow us in social media platforms.
Be the first to know about releases and tutorial news and solutions.
We care about your data in our privacy policy.
ITSolutionsGuides was started mainly to provide good and quality web solutions for all the developers. We provide tutorials to support all the developers and also we try to provide solutions to the errors we face while coding.
ITSolutionsGuides, provide users with an easy-to-use form to reach out for support or inquiries.
Copyright © 2023 - 2024 All rights reserved | ITSolutionsGuides