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.

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

 

 

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 :

Recommended Post
Featured Post
Laravel 10 Delete Multiple Records Using Checkbox
Laravel 10 Delete Multiple Rec...

In this article, we will see laravel 10 delete multiple records using the checkbox. Here, we will learn about how to del...

Read More

Mar-03-2023

How to Uninstall Composer on Ubuntu 23.04
How to Uninstall Composer on U...

Hey there! If you've found your way to this guide, chances are you're looking to bid farewell to Composer on you...

Read More

Jan-22-2024

Angular 15: Unleashing Modern Web Development
Angular 15: Unleashing Modern...

Angular 15 is the latest iteration of one of the most popular JavaScript frameworks for building dynamic web application...

Read More

Jun-05-2023

How To Get Current URL In React JS
How To Get Current URL In Reac...

As a React JS developer, I have come to appreciate the power and popularity of this remarkable JavaScript library. Its c...

Read More

Aug-09-2023