Laravel Autocomplete text field suggestions search using Database

Laravel Autocomplete text field suggestions search using Database

Laravel and ajax autocomplete text field Example

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

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

php artisan make:seeder UsersTableSeeder

Simple Add Route and Controller in Laravel

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

Also Read :  cURL POST header parameters file json request

app/Http/routes.php

    Route::get('autocomplete',array('as'=>'autocomplete','uses'=>'laravelAutoCtrl@home'));
    Route::get('searchajax',array('as'=>'searchajax','uses'=>'laravelAutoCtrl@autoComplete'));

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

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.

Also Read :  Very Simple PHP Script to Upload Image or file from an URL

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

Example

Leave a Reply

Your email address will not be published. Required fields are marked *