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 database. Using 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.

<?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');

Read Also : Laravel 9 REST API With Passport Authentication

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 : Laravel 9 File Upload Example

Step 3 : Create Blade File

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

<!DOCTYPE html>
<html>
<head>
    <title>Laravel 9 Autocomplete Search from Database - Websolutionstuff</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;">Laravel 9 Autocomplete Search from Database - Websolutionstuff</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 :