Laravel 8 Ajax Autocomplete Search from Database Example

Hi Guys,

In This Article, I am going to scratch and learn how to use and implement ajax autocomplete search from the database in laravel 8 application. so We will learn how to utilize it in laravel 8 application. I wrote a simple example for an ajax autocomplete search. I will justify your ajax autocomplete search in laravel 8.

So, suppose you have thousands or millions of records in your database if you are dealing with like you have products table and thousands of records so it's not possible to give drop-down box, but it is better if we use autocomplete instead of the select box.

Here I will show you a full example of an ajax autocomplete search in laravel 8. So let's started first of follow a few steps to get examples.

Step 1: Install Laravel 8


In the first step, we need to go from scratch, get a fresh laravel 8 version application So let's open the terminal and run the below command to install a fresh laravel project.

composer create-project --prefer-dist laravel/laravel blog

Step 2: Database Configuration

In this second step, we will create database Configuration for the example database name, username, password, etc for our crud application of laravel 8 So let's open the .env file and fill in all details like as bellow:

.env

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=here your database name(blog)

DB_USERNAME=here database username(root)

DB_PASSWORD=here database password(root)

Step 3: Create Migration Table

database/migrations/2021_05_29_064753_create_products_table.php

<?php

use Illuminate\Database\Migrations\Migration;

use Illuminate\Database\Schema\Blueprint;

use Illuminate\Support\Facades\Schema;

class CreateProductsTable extends Migration

{

/**

* Run the migrations.

*

* @return void

*/

public function up()

{

Schema::create('products', function (Blueprint $table) {

$table->id();

$table->string('name');

$table->string('price');

$table->text('details');

$table->timestamps();

});

}

/**

* Reverse the migrations.

*

* @return void

*/

public function down()

{

Schema::dropIfExists('products');

}

}

After complete configuration and migrate all the tables so let's open the terminal run bellow artisan command:

php artisan migrate

Step 4: Create Model

Ok, so after run bellow command you will find "app/Product.php" and put bellow content in the Product.php file:

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;

use Illuminate\Database\Eloquent\Model;

class Product extends Model

{

use HasFactory;

protected $fillable = [

'name',

'price',

'details',

];

}

Step 5: Create Route

Here, we require to integrate the route. let's open your "routes/web.php" file and add the following route.

routes/web.php

<?php

use App\Http\Controllers\AutosearchController;

use Illuminate\Support\Facades\Route;

Route::get('search', [AutosearchController::class, 'autosearch'])->name('search');

Step 6: Add Controller

In this step, now we should create a new controller as AutosearchController. So run the below command and create a new controller.

So, let's copy the below code and put it on the AutosearchController.php file.

php artisan make:controller AutosearchController

app/Http/Controllers/AutosearchController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Models\Product;

use Illuminate\Support\Facades\DB;

class AutosearchController extends Controller

{

/**

* Write code on Method

*

* @return response()

*/

public function autosearch(Request $request)

{

if ($request->ajax()) {

$data = Product::where('name','LIKE',$request->name.'%')->get();

$output = '';

if (count($data)>0) {

$output = '<ul class="list-group" style="display: block; position: relative; z-index: 1">';

foreach ($data as $row) {

$output .= '<li class="list-group-item">'.$row->name.'</li>';

}

$output .= '</ul>';

}else {

$output .= '<li class="list-group-item">'.'No Data Found'.'</li>';

}

return $output;

}

return view('autosearch');

}

}

Step 7: Add Blade File

In the last step. In this step, we have to create just a blade file. so we need to create only one blade file as an autosearch.blade.php file.

resources/views/autosearch.blade.php

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Laravel 8 Ajax Autocomplete Search from Database Example - NiceSnippets.com</title>

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.0-alpha1/css/bootstrap.min.css">

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>

</head>

<body class="bg-dark">

<div class="container mt-5">

<div class="row">

<div class="col-md-10 offset-1">

<div class="card">

<div class="card-header">

<h5>Laravel 8 Ajax Autocomplete Search from Database Example - NiceSnippets.com</h5>

</div>

<div class="card-body">

<div class="row">

<div class="col-md-12">

<div class="form-group">

<label for="name">Product Name</label>

<input type="text" name="name" id="name" class="form-control" autocomplete="off">

</div>

<div id="product_list"></div>

</div>

<div class="col-lg-3"></div>

</div>

</div>

</div>

</div>

</div>

</div>

<script type="text/javascript">

$(document).ready(function(){

$('#name').on('keyup',function () {

var query = $(this).val();

$.ajax({

url:'{{ route('search') }}',

type:'GET',

data:{'name':query},

success:function (data) {

$('#product_list').html(data);

}

})

});

$(document).on('click', 'li', function(){

var value = $(this).text();

$('#name').val(value);

$('#product_list').html("");

});

});

</script>

</body>

</html>

So, Let's get run our laravel 8 application Now we are ready to run our application example with laravel 8 so run the bellow command for a quick run:

php artisan serve

Now you can open bellow URL on your browser:

localhost:8000/search

It will help you...

#Trending #Video #Featured

Press ESC to close