Laravel 8 Autocomplete Search from Database

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

So, let's see autocomplete search in laravel 8, autocomplete search using ajax, autocomplete search example, ajax autocomplete textbox in laravel 8.

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.

<?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 a controller as per your requirement and add the 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 the last step, we will create the user.blade.php file for output view.

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

techsolutionstuff

Techsolutionstuff | The Complete Guide

I'm a software engineer and the founder of techsolutionstuff.com. Hailing from India, I craft articles, tutorials, tricks, and tips to aid developers. Explore Laravel, PHP, MySQL, jQuery, Bootstrap, Node.js, Vue.js, and AngularJS in our tech stack.

RECOMMENDED POSTS

FEATURE POSTS