Laravel 11 Bootstrap Typeahead Autocomplete Search Example

Laravel 11 Bootstrap Typeahead Autocomplete Search Example

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_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:

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">
<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 -</title>
<link href="[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
.container {
padding: 10%;
text-align: center;
<div class="container">
<div class="row">
<div class="col-12"><h2>Laravel 11 Typeahead Autocomplete Search Example -</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" />
<script src=""></script>
<script src=""></script>
<script type="text/javascript">
var route = "{{ url('search-autocomplete') }}";
source: function (term, process) {
return $.get(route, { term: term }, function (data) {
return process(data);

Step 7 – Test Application

Run php artisan serve command to start application server:

php artisan serve

Open browser with URL


With the help of the tutorial guide you will have learned how to create autocomplete search functionality using bootstrap typeahead js.

Recommended Guides


Greetings, I'm Devendra Dode, a full-stack developer, entrepreneur, and the proud owner of My passion lies in crafting informative tutorials and offering valuable tips to assist fellow developers on their coding journey. Within my content, I cover a spectrum of technologies, including PHP, Python, JavaScript, jQuery, Laravel, Livewire, CodeIgniter, Node.js, Express.js, Vue.js, Angular.js, React.js, MySQL, MongoDB, REST APIs, Windows, XAMPP, Linux, Ubuntu, Amazon AWS, Composer, SEO, WordPress, SSL, and Bootstrap. Whether you're starting out or looking for advanced examples, I provide step-by-step guides and practical demonstrations to make your learning experience seamless. Let's explore the diverse realms of coding together.

Leave a Reply

Your email address will not be published. Required fields are marked *