IT-Solutions BD

A Leading Software Company in Bangladesh

Blog Image
Ajax Autocomplete Search
  • Seen 77
  • Liked 1.5k
Author Image
Post by : Jahirul Islam

In this tutorial, i will tell you how to create dynamic jquery autocomplete search from database table in laravel 7 project. we can create manual ajax autocomplete textbox in laravel 7 using Ajax request.

Jquery autocomplete is must if you are dealing with big data, like you have items or 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 select box.

In this laravel ajax form autocomplete tutorial you will learn from scratch that how to use ajax autocomplete search laravel 7 application. If you don't know how to search data with autocomplete in laravel using ajax, then i will teach you step by step. 

Follow bellow step to create simple autocomplete search with laravel 7 application.

autocomplete-search-with-laravel-jquery-and-ajax

Step 1 - Create new laravel project

Open your terminal OR command prompt and run bellow command:

composer create-project laravel/laravel LaravelSearch
PHP

Step 2: Create Table and Model

In this step we have to create migration for items table using Laravel 5.8 php artisan command, so first fire bellow command:

php artisan make:model Country -m
PHP

Now there will a model called Country and a migration file made for countries in database/migrations folder. Open the migration file to edit.

database/migrations/migration.php

use Illuminate\Support\Facades\Schema;use Illuminate\Database\Schema\Blueprint;use Illuminate\Database\Migrations\Migration;class CreateCountriesTable extends Migration{        public function up()    {        Schema::create('countries', function (Blueprint $table) {            $table->increments('id');            $table->string('name');            $table->string('code');            $table->timestamps();        });    }//it-solutionsbd.com//    public function down()    {        Schema::dropIfExists('countries');    }}
PHP

Now we are ready to migrate our database. Then a table called countries will be created. Command to migrate :

php artisan migrate
PHP

Step 3 - Create a view

Go to resources/views folder and open welcome.blade.php file and place the below code.

resources/views/welcome.blade.php

<!doctype html><html lang="{{ app()->getLocale() }}">    <head>        <meta charset="utf-8">        <meta http-equiv="X-UA-Compatible" content="IE=edge">        <meta name="viewport" content="width=device-width, initial-scale=1">        <title>Laravel</title>        <style type="text/css">            body{                font-family: 'Roboto', sans-serif;            }        </style>    </head>

<!-- it-solutionsbd.com --> <body> <div class="container" style="margin-top: 50px;"> <div class="row"> <div class="col-lg-3"></div> <div class="col-lg-6"> <h4 class="text-center">Autocomplete Search Box with <br> Laravel + Ajax + jQuery</h4><hr> <div class="form-group"> <label>Type a country name</label> <input type="text" name="country" id="country" placeholder="Enter country name" class="form-control"> </div> <div id="country_list"></div> </div> <div class="col-lg-3"></div> </div> </div> <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> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> <script type="text/ez-screx"> $(document).ready(function () { $('#country').on('keyup',function() { var query = $(this).val(); $.ajax({ url:"{{ route('search') }}", type:"GET", data:{'country':query}, success:function (data) { $('#country_list').html(data); } }) // end of ajax call }); $(document).on('click', 'li', function(){ var value = $(this).text(); $('#country').val(value); $('#country_list').html(""); }); }); </script> </body></html>
HTML

Step 4 - Make a controller

Create a new controller using command prompt. Command :

php artisan make:controller SearchController
PHP

Then place the code included below. Comments have been put to explain the code to you..Read them!

App\Http\Controllers\SearchController .php

namespace App\Http\Controllers;use App\Country;use http\Env\Response;use Illuminate\Http\Request;use Illuminate\Support\Facades\DB;class SearchController extends Controller{    public function search(Request $request){                if($request->ajax()) {                      $data = Country::where('name', 'LIKE', $request->country.'%')                ->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 results'.'</li>';            }                       return $output;        }    }}
HTML

Blog Image

Ajax Autocomplete Search

In this tutorial, i will tell you how to create dynamic jquery autocomplete search from database table in laravel 7 project. we can create manual a...

Blog Image

Ajax Autocomplete Search

In this tutorial, i will tell you how to create dynamic jquery autocomplete search from database table in laravel 7 project. we can create manual a...

Blog Image

Ajax Autocomplete Search

In this tutorial, i will tell you how to create dynamic jquery autocomplete search from database table in laravel 7 project. we can create manual a...

Track Order

Estimated Time

30 minutes

Order Number

#25624
Order Accept
We have accept your order
Order Confirmed
Your order has been confirmed
Order Procssed
We are rady your order
Ready To Delivery
Your order is rady for Delivery