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 :  Autocomplete Textbox using jQuery, PHP and MySQLi

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

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 :  PHP Autocomplete Input tags with Dynamic Data using jquery Ajax

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

Example

Recommended For You.

Autocomplete Textbox using jQuery, PHP and MySQLi Today, We want to share with you Autocomplete Textbox using jQuery, PHP and MySQLi. In