How To Create Autocomplete Search In Laravel 9
Tags: laravel9, autocomplete, search, ajax
Published: 2022-11-28 05:30:00

In this article, we will see how to create autocomplete search in laravel 9. In this example, we will use ajax autocomplete textbox and get records from the database in laravel 9. 

Also, we will use the typehead javascript library to search records from the database.

The jQuery Typeahead plugin provides autocomplete preview on search inputs similar to google search with built-in options and deep customization.

So, let's see laravel 9 autocomplete search from the database, and autocomplete search using jquery in laravel 9.

> Step 1: Add Route

Here, I have added the routes method in the route file for this autocomplete search example in laravel 9.

```
<?php

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\UserController;

Route::get('/', function () {
    return view('welcome');
});

Route::get('search', [UserController::class, 'search']);
Route::get('autocomplete', [UserController::class, 'autocomplete'])->name('autocomplete');
``` 

> Step 2: Create Controller
Now, we have added the below code to the controller.

```
<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\User;
use DB;

class UserController extends Controller
{
	public function search()
    {
        return view('user');
    }
  
    public function autocomplete(Request $request)
    {        
        $data = User::select("name")
                ->where("name","LIKE","%{$request->str}%")
                ->get('query');   
        return response()->json($data);
    }
}
``` 

---

**_[Read Also: REST API With Passport Authentication In Laravel 9](https://techsolutionstuff.com/post/rest-api-with-passport-authentication-in-laravel-9)_**

--- 

> Step 3: Create Blade File
In this step, we will create the user.blade.php file for the output view.

```
<!DOCTYPE html>
<html>
<head>
    <title>How To Create Autocomplete Search In Laravel 9 - Techsolutionstuff</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.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">
    <h2 style="margin: 30px 0px; text-align: center;">How To Create Autocomplete Search In Laravel 9 - Techsolutionstuff</h2>   
    <input class="search form-control" type="text" placeholder="Search here...">
</div>   
<script type="text/javascript">
    var path = "{{ route('autocomplete') }}";
    $('input.search').typeahead({
        source:  function (str, process) 
        {
          return $.get(path, { str: str }, function (data) {
                return process(data);
            });
        }
    });
</script>   
</body>
</html>
```

---

You might also like:

- **_[Read Also: Jquery Search Filter Table Rows Example](https://techsolutionstuff.com/post/jquery-search-filter-table-rows-example)_**
- **_[Read Also: How To Generate PDF Using DomPDF In Laravel 9](https://techsolutionstuff.com/post/how-to-generate-pdf-using-dompdf-in-laravel-9)_**