How to Autocomplete Search using Typeahead Js in Laravel 9

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: Laravel 9 Get env Variable in Blade File Example