Laravel 9 Autocomplete Search from Database

WebSolutionStuff | Mar-14-2022 | Categories : Laravel PHP jQuery

In this article, we will see laravel 9 autocomplete search from the databaseUsing ajax autocomplete textbox in laravel 9 we will get records from the database and get in laravel 9.

So, let's see laravel 9 autocomplete search example, autocomplete search in laravel 9, autocomplete search jquery laravel 9, laravel 9 autocomplete search ajax.

when you have more data in your table at a time you can't give a dropdown box because it will take more time to fetch data from the database. So, here we will add autocomplete search using ajax.

Step 1 : Add Route

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


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.


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")
        return response()->json($data);



Step 3 : Create Blade File

In the last step, we will create the user.blade.php file for output view.

<!DOCTYPE html>
    <title>Laravel 9 Autocomplete Search from Database - Websolutionstuff</title>
    <link rel="stylesheet" href="">
    <script src=""></script>
    <script src=""></script>
<div class="container">
    <h2 style="margin: 30px 0px; text-align: center;">Laravel 9 Autocomplete Search from Database - Websolutionstuff</h2>   
    <input class="search form-control" type="text" placeholder="Search here...">
<script type="text/javascript">
    var path = "{{ route('autocomplete') }}";
        source:  function (str, process) 
          return $.get(path, { str: str }, function (data) {
                return process(data);


You might also like :

Recommended Post

Featured Post

Follow us
facebooklogo github instagram twitter