In this article, we will see laravel 9 autocomplete search from the database. Using ajax autocomplete textbox in laravel 9 we will get records from the database and get in laravel 9.
So, let's see laravel 9 autocomplete search example, autocomplete search in laravel 9, autocomplete search jquery laravel 9, laravel 9 autocomplete search ajax.
when you have more data in your table at a time you can't give a dropdown box because it will take more time to fetch data from the database. So, here we will add autocomplete search using ajax.
Here, I have added the routes method in the route file for this autocomplete search example in laravel 9.
<?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');Now, we have added the below code to the controller.
<?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);
}
}In the last step, we will create the user.blade.php file for output view.
<!DOCTYPE html>
<html>
<head>
<title>Laravel 9 Autocomplete Search from Database - Websolutionstuff</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;">Laravel 9 Autocomplete Search from Database - Websolutionstuff</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>You might also like :
- Read Also: Laravel 9 User Role and Permission
- Read Also: Laravel 9 Multiple Database Connections
- Read Also: Laravel 9 Generate PDF File Using DomPDF
- Read Also: How To Encrypt And Decrypt String In Laravel 9
