In Laravel 11, Bootstrap provides a Typeahead JS library, which is lightweight and used to make autocomplete search functionality in application.
In this guide, we will teach you how to develop autocomplete search from a database using bootstrap typeahead js in the laravel 11 application.
Laravel 11 Bootstrap Typeahead Autocomplete Search Example
Here are:
Step 1 – Download New Laravel Application
Run the following command on cmd or terminal window to download laravel application into your server:
composer create-project --prefer-dist laravel/laravel TypeaheadSearch
Step 2 – Initialize Database with Application
Edit .env file from root folder of laravel application and configure database in it; something like this:
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=here your database name here
DB_USERNAME=here database username here
DB_PASSWORD=here database password here
Run the following command on cmd to create tables in a database:
cd TypeaheadSearch
php artisan migrate
Step 3 – Add Dummy Data
Now, open your terminal or cmd and use tinker and factory command to add dummy data in database:
php artisan tinker factory(App\Models\User::class, 100)->create();
Step 4 – Add Routes
Edit web.php file from routes folder and add autocomplete routes into it to handle search request in application; something like this:
use App\Http\Controllers\TestController;
Route::get('form', [TestController::class, 'index']);
Route::get('search-autocomplete', [TestController::class, 'searchAutocomplete']);
Step 5 – Create Controller File
Create a controller file to handle autocomplete search from database; run the following command on cmd to create it:
php artisan make:controller TestController
Edit TestController.php file from app/http/controllers/ folder and create two methods into it:
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\User;
class TestController extends Controller
{
public function index()
{
return view('search');
}
public function searchAutocomplete(Request $request)
{
$search = $request->get('term');
$result = User::where('name', 'LIKE', '%' . $search . '%')->pluck('name');
return response()->json($result);
}
}
Step 6 – Create Search Autocomplete Form
Create a blade view file named search.blade.php file in resources/views folder, and then create a autocomplete search form into it; something like this:
<!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">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>Laravel 11 Typeahead Autocomplete Search Example - Tutsmake.com</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
.container {
padding: 10%;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-12"><h2>Laravel 11 Typeahead Autocomplete Search Example - Tutsmake.com</h2></div>
<div class="col-12">
<div id="custom-search-input">
<div class="input-group">
<input id="search" name="search" type="text" class="form-control" placeholder="Search" />
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.1/bootstrap3-typeahead.min.js"></script>
<script type="text/javascript">
var route = "{{ url('search-autocomplete') }}";
$('#search').typeahead({
source: function (term, process) {
return $.get(route, { term: term }, function (data) {
return process(data);
});
}
});
</script>
</body>
</html>
Step 7 – Test Application
Run php artisan serve command to start application server:
php artisan serve
Open browser with URL http://127.0.0.1:8000/form:
http://127.0.0.1:8000/form
Conclusion
With the help of the tutorial guide you will have learned how to create autocomplete search functionality using bootstrap typeahead js.
