I'll show you today how to use typeahead js to make autocomplete search in Laravel 9. We'll demonstrate a typeahead js-based Laravel 9 autocomplete search. We will demonstrate how to create a search autocomplete box in Laravel 9 using jQuery Typehead and ajax. I'll utilize the bootstrap library, the jQuery typehead js plugin, and ajax to add search autocomplete to my Laravel 9 application.
Here, I'll offer you a detailed example of how to use typeahead js with Laravel 9's ajax autocomplete search as shown below.
Step 1: Install Laravel 9 Application
Since we are starting from scratch, the following command must be used to obtain a new Laravel application. Open a terminal or a command prompt, then enter the following command:
composer create-project --prefer-dist laravel/laravel Laravel9TypeheadTutorial
Step 2: Database Configuration
Configure your downloaded/installed Laravel 9 app with the database in this stage. The .env file must be located, and the database setup information is as follows:
DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=db name DB_USERNAME=db user name DB_PASSWORD=db password
Step 3: Add Dummy Record
I'll create fictitious records for database table users in this stage. Open the DatabaseSeeder.php file by going to the database/seeders/ directory. Add the next two lines of code after that.
use App\Models\User; User::factory(100)->create();
Then, launch command prompt, and use the following command to go to your project:
cd / Laravel9TypeheadTutorial
Open your terminal once more, and then type the following command on cmd to create tables in the database of your choice:
php artisan migrate
Run the database seeder command after that to create dummy data for the database:
php artisan db:seed --force
Step 4: Create Routes
Open the web.php file, which is found in the routes directory, in this step. Add the following routes to the web.php file after that:
use App\Http\Controllers\AutocompleteSearchController;
Route::get('/autocomplete-search', [AutocompleteSearchController::class, 'index'])->name('autocomplete.search.index');
Route::get('/autocomplete-search-query', [AutocompleteSearchController::class, 'query'])->name('autocomplete.search.query');
Step 5: Creating Auto Complete Search Controller
The following command will be used to create the search AutocompleteSearch controller in this stage.
php artisan make:controller AutocompleteSearchController
The AutocompleteSearchController.php file will be created by the aforementioned command and placed in the Laravel8TypeheadTutorial/app/Http/Controllers/ directory.
Subsequently, include the following controller methods in AutocompleteSearchController.blade.php:
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\User;
class AutocompleteSearchController extends Controller
{
public function index()
{
return view('autocompleteSearch');
}
public function query(Request $request)
{
$input = $request->all();
$data = User::select("name")
->where("name","LIKE","%{$input['query']}%")
->get();
return response()->json($data);
}
}
Step 6: Create Blade File
Create a new blade view file called autocompleteSearch.blade.php in the resources/views directory in step 6 so that ajax can access the database.
<!DOCTYPE html>
<html>
<head>
<title>Autocomplete Search Using Typehead | Laravel 9</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6 offset-md-3 mt-5">
<h5>Laravel 9 Autocomplete Search Using Typehead</h5>
<input type="text" class="form-control typeahead">
</div>
</div>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.min.js" ></script>
<script type="text/javascript">
var path = "{{ url('autocomplete-search-query') }}";
$('input.typeahead').typeahead({
source: function (query, process) {
return $.get(path, { query: query }, function (data) {
return process(data);
});
}
});
</script>
</html>
Now that we have our typeahead js example for Laravel 9 autocomplete search running, use the following command for a quick test:
php artisan serve
You can now access the following URL in your browser:
http://localhost:8000/autocomplete-search
