Laravel 8 Autocomplete Search from Database

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

In this article, we will see the laravel 8 autocomplete search from the database. Using ajax autocomplete textbox in laravel 8 we will get records from the database and get them in laravel. 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.

So, let's see ajax autocomplete textbox in laravel 7 and laravel 8, dynamic autocomplete in laravel, and autocomplete search in laravel 8 using typeahead.js

Step 1: Add Route

Here, we 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, we have already created UserController for this example. So, you can create a controller as per your requirement and add 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 this step, we will create a user.blade.php file for the 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>

 


You might also like:

Recommended Post
Featured Post
Laravel 8 Datatables Filter with Dropdown
Laravel 8 Datatables Filter wi...

In this example we will see laravel 8 datatables filter with dropdown, Here we will add datatables custom...

Read More

Jun-16-2021

How To Create Custom Error Page In Laravel 9
How To Create Custom Error Pag...

In this article, we will see how to create a custom error page in laravel 9. Here we will create a custom 404 error...

Read More

Feb-09-2023

Cron Job Scheduling In Laravel
Cron Job Scheduling In Laravel

In this article, we will see cron job scheduling in laravel. Many times we require to run some piece of code in a specif...

Read More

Sep-28-2020

How To File Upload In Laravel 10 Example
How To File Upload In Laravel...

In this article, we will see how to file upload in laravel 10 examples. Here, we will learn about the laravel...

Read More

Mar-15-2023