How To Create Autocomplete Search In Laravel 9
In this article, we will see how to create autocomplete search in laravel 9. In this example, we will use ajax autocomplete textbox and get records from the database in laravel 9. Also, we will use the typehead javascript library to search records from the database.
The jQuery Typeahead plugin provides autocomplete preview on search inputs similar to google search with built-in options and deep customization.
So, let's see laravel 9 autocomplete search from the database, and autocomplete search using jquery in laravel 9.
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 this step, we will create the user.blade.php file for the output view.
<!DOCTYPE html>
<html>
<head>
<title>How To Create Autocomplete Search In Laravel 9 - Techsolutionstuff</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 - Techsolutionstuff</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: Jquery Search Filter Table Rows Example
- Read Also: How To Generate PDF Using DomPDF In Laravel 9
- Read Also: How To Search Comma Separated Values In Laravel
- Read Also: Datatable Server Side Custom Search/Filter In Laravel
