Laravel 8 Autocomplete Search from the Database Using Ajax and Jquery

Laravel 8 Autocomplete Search from Database Using Ajax and Jquery
Laravel 8 Autocomplete Search from Database Using Ajax and Jquery

In this tutorial, we will learn Laravel 8 autocomplete search from the database using ajax and Jquery.

The autocomplete search is very helpful because we can search the data from the database just by typing the information we want instead of reloading the page. Also, it is a very important part of a good UI of the application.

We are able to do the autocomplete search because of AJAX and Jquery. Without AJAX, we can not search the data on the fly i.e. without submitting any search button.

Required steps of Laravel 8 autocomplete search from database

Step 1:- Create a project in laravel 8

Please Read, How to create laravel project from scratch step by step

Step 2:- Set up the database.


Step 3:- Create a table in the database

CREATE TABLE `employee` (
  `id` int(10) unsigned NOT NULL AUTO_INCREMENT,
  `name` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
  `age` varchar(20) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
  `department` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
  `created_at` timestamp NOT NULL DEFAULT current_timestamp() ON UPDATE current_timestamp(),
  `updated_at` timestamp NOT NULL DEFAULT '0000-00-00 00:00:00',
  PRIMARY KEY (`id`)

Step 4:- Set up routes in the web.php file inside the routes folder as shown below

Route::get('/searchdata',[App\Http\Controllers\EmployeeController::class, 'index']);
Route::get('/empsearch',[App\Http\Controllers\EmployeeController::class, 'searchemp']);

We can see from the above routes that the EmployeeController has two methods

  • index()
  • searchemp()

The index() method is used for viewing the employee information from the database in the blade file.

On the other hand, the searchemp() method is used to search the required information from the database based on the user request and return the response data to the user.

Step 5:- Create a model using the artisan command in the command terminal as shown below

php artisan make:model Employee

The above command will create a model like app\Models\Employee.php


namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Employee extends Model
    use HasFactory;
    protected $table = 'employee';
     protected $fillable = [

Step 6:- Create a controller using the artisan command in the command terminal as shown below

php artisan make:controller EmployeeController


namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\Employee;
use DB;
use Auth;

class EmployeeController extends Controller
    public function index(){

    	$data = Employee::all();

    	return view('searchdata',compact('data'));

    public function searchemp(Request $request){
    $searchvalue = $request->search;

          $empinfo = DB::table('employee')
	if (count($empinfo)>0) {
	        $output = '';
	        foreach ($empinfo as $key=>$value){
	        $output .= '<tr>

	else {
	    $empinfo = Employee::all();
	    $output = '';
	       foreach ($empinfo as $key=>$value){
	        $output .= '<tr>

	            return $output;


Step 7:- Create a blade file inside the resources\views folder of the laravel project.


<meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="">

	<div class="container">
	<div class="row">
		<div class="col-sm-8">
			<div class="form-group">
			    <label for="name">Search Employee Data:</label>
			    <input type="search" class="form-control" onkeyup="fetchDataEmp()" id="find" placeholder="search here">
	<h4>Search Result:</h4>
	    <table class="table table-bordered">
		        <th>SL No</th>
		    @foreach($data as $key=>$value)

<script src=""></script>
<script src=""></script>
function fetchDataEmp(){
  var search = $('#find').val();
    url: 'empsearch',
    type: 'get',
    data: {'search':search},

Step 8:- Now, open the terminal and type the command as shown below

php artisan serve

The above command will generate the link as shown below

Step 9:- Now, open the browser and hit the below URL

Conclusion:- I hope this tutorial will help you to understand the overview. If you have any doubt then please leave a comment below.

Leave a Comment