Laravel Autocomplete text field suggestions search using Database

0
()

Laravel Autocomplete text field suggestions search using Database

Laravel and ajax autocomplete text field Example

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

Free Live Chat for Any Issue

Create a Products Table and Model

Insert some dummy test data in your Items table or we can use Laravel latest version or more seed classes to create seeding your simple database with dummy data.If we want to write all the laravel seeders then run this win + r and open cmd to command that generate seed and get dir find this pasth file in database/seeds each directory.Laravel Autocomplete text field suggestions search using Database Example

Read Also:  PHP Format File Size Convert KB MB GB

php artisan make:seeder UsersTableSeeder

Simple Add Route and Controller in Laravel

Add these simple two routes file in your dir routes.php file.

app/Http/routes.php

    Route::get('autocomplete',array('as'=>'autocomplete','uses'=>'[email protected]'));
    Route::get('searchajax',array('as'=>'searchajax','uses'=>'[email protected]'));

Now second phase we will create simple laravelAutoCtrl.php in following path here app/Http/Controllers

app/Http/Controllers/laravelAutoCtrl.php

    namespace App\Http\Controllers;
    use Illuminate\Http\Request;
    use App\Http\Controllers\Controller;
    use App\Product;
    class laravelAutoCtrl extends Controller {
        
        public function home(){
            return view('autocomplete.home');
       }
        public function autoComplete(Request $request) {
            $query = $request->get('term','');
            
            $products=Product::where('name','LIKE','%'.$query.'%')->get();
            
            $data=array();
            foreach ($products as $product) {
                    $data[]=array('value'=>$product->name,'id'=>$product->id);
            }
            if(count($data))
                 return $data;
            else
                return ['value'=>'sorry No any Result Found','id'=>''];
        }
        
    }

Create Blade File

Read Also:  How to write SQL Sub Query in PHP with MySQLi

Now we will create simple home.blade.php simple file in following path or directory resources/views/autocomplete/ directory.

    @extends('layouts.default')
     
    @section('content')
       <div class="row">
            <div class="col-xs-6 col-sm-6 col-md-6">
                <div class="form-group">
                    
                    {!! Form::text('mys_text', null, array('placeholder' => 'here any put Search Text','class' => 'form-control','id'=>'mys_text')) !!}
                </div>
            </div>
        </div>
        
       <script>
       $(document).ready(function() {
        src = "{{ route('searchajax') }}";
         $("#mys_text").autocomplete({
            source: function(request, response) {
                $.ajax({
                    url: src,
                    dataType: "json",
                    data: {
                        term : request.term
                    },
                    success: function(data) {
                        response(data);
                       
                    }
                });
            },
            minLength: 3,
           
        });
    });
    </script>
    @endsection

Don’t any forget to simple libs add Js and external Css file in your simple master/default layout page.

Read Also:  encapsulation in php

<link href="jquery.ui.autocomplete.css" rel="stylesheet">
<script src="js/jquery.js"></script>
<script src="js/jquery-ui.min.js"></script>

Download

Example

How useful was this post?

Click on a star to rate it!