Today we are going to learn How to Autocomplete Search using Typeahead Js in Laravel 9. This tutorial will cover on searching user with autocomplete using typeahead js in laravel 9 application.
In this article, we will cover how to autocomplete search using typeahead js in laravel 9?. laravel 9 autocomplete search using typehead js. In this tutorial, we will learn how to implement autocomplete search with Database in laravel 9 using jQuery typeahead js. will guide you step by step how to implement autocomplete search with database in laravel 9 using typeahead js. i will share with you how to build search autocomplete box using jQuery typehead js in laravel 9.
Now in this laravel tutorial, i will share with you how we can implement auto complete search also with database by using jQuery typeahead js example. Here we see how to implement auto complete search also with Database in laravel application with jQuery typeahead js.
Steps on How to Autocomplete Search using Typeahead Js in Laravel 9:
- Step 1: Install fresh new Laravel 9 Application
- Step 2: Adding Dummy Users
- Step 3: Creating Controller
- Step 4: Creating Routes
- Step 5: Creating View File
- Step 6: Testing
- Step 7: Conclusion
Also Read: How to Create PDF File in Laravel 9?
Step 1: Install fresh new Laravel 9 Application
Let us begin the tutorial by installing a new laravel application. if you have already created the project, then skip following step.
composer create-project laravel/laravel example-app
Step 2: Adding Dummy Users
First, we need to run default migrations, so we have created new users table. so let’s run migration command:
php artisan migrate
next, we will create some dummy users using tinker factory. so let’s create dummy records using bellow command:
php artisan tinker
User::factory()->count(20)->create()
Also Read: Laravel 9 Import Export Excel & CSV File to Database Example
Step 3: Creating Controller
In this point, now we should create new controller as SearchController. This controller we will add two method, one for return view response and another for getting ajax with json response. return response, so put bellow content in controller file :
app/Http/Controllers/SearchController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\User;
class SearchController extends Controller
{
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function index()
{
return view('autocompleteSearch');
}
/**
* Show the form for creating a new resource.
*
* @return \Illuminate\Http\Response
*/
public function autocomplete(Request $request)
{
$data = User::select("name")
->where('name', 'LIKE', '%'. $request->get('query'). '%')
->get();
return response()->json($data);
}
}
Also Read: How to Upload Image in Laravel 9?
Step 4: Creating Routes
In this is step we need to create route for datatables layout file and another one for getting data. so open your “routes/web.php” file and add following route.
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\SearchController;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
Route::controller(SearchController::class)->group(function(){
Route::get('search', 'index');
Route::get('autocomplete', 'autocomplete')->name('autocomplete');
});
Step 5: Creating View File
In Last step, let’s create autocompleteSearch.blade.php (resources/views/autocompleteSearch.blade.php) for layout and lists all items code here and put following code:
resources/views/autocompleteSearch.blade.php
<!DOCTYPE html>
<html>
<head>
<title>How to Autocomplete Search using Typeahead JS in Laravel 9 - LaravelTuts.com</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.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 mt-5">
<h3 class="mb-5 text-center">How to Autocomplete Search using Typeahead JS in Laravel 9 - LaravelTuts.com</h3>
<strong>Search User:</strong>
<input class="typeahead form-control" id="search" type="text">
</div>
<script type="text/javascript">
var path = "{{ route('autocomplete') }}";
$('#search').typeahead({
source: function (query, process) {
return $.get(path, {
query: query
}, function (data) {
return process(data);
});
}
});
</script>
</body>
</html>
Also Read: Laravel 9 Form Validation With Error Messages
Step 6: Testing
Now everything is done! we can now test our laravel application. First run the serve command on terminal as shown below.
php artisan serve
And open the following URL in any web browser.
http://127.0.0.1:8000/search
Also Read: Laravel 9 Remove Public from URL using htaccess
Previews:

Step 7: Conclusion
Today, We had learn How to Autocomplete Search using Typeahead Js in Laravel 9. Hope this tutorial helped you with learning Laravel 9. If you have any question you can ask us at comment section below. If you like the tutorial please subscribe our YouTube Channel and follow us on social network Facebook and Instagram.
[…] Also Read: How to Autocomplete Search using Typeahead Js in Laravel 9 […]
[…] Also Read: How to Autocomplete Search using Typeahead Js in Laravel 9 […]
[…] Also Read: How to Autocomplete Search using Typeahead Js in Laravel 9 […]