Laravel 8 Autocomplete Search from Database

WebSolutionStuff | Mar-01-2021 | Categories : Laravel PHP

In this post we will see laravel 8 autocomplete search from database, using ajax autocomplete textbox in laravel 8 we will get records from database and get in laravel.

when you have more data in your tabel at time you can't give dropdownbox because it iwill take more time to fetch data from database so hear we will add autocomplete search using ajax.

So, let;s start and work on autocomplete search example or search functionality in laravel.

 

Step 1 : Add Route

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

<?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, i have already created UserController for this example, so you can create controller as per your requirment and add below code in your 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 last step we will create user.blade.phpfile for output view.

<!DOCTYPE html>
<html>
<head>
    <title>Laravel 8 Autocomplete Search from Database - websolutionstuff.com</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 8 Autocomplete Search from Database - websolutionstuff.com</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>

Hope, you have clear this concept.

 

Featured Post




Follow us
facebooklogo github instagram twitter