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

Read Also:  Autocomplete Textbox using jQuery, PHP and MySQLi

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:  PHP MySQLi CRUD Insert Update Delete

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:  Laravel 5.6 Dependent Dynamic dropdown Example Tutorial

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

Example


Related FAQ

Here are some more FAQ related to this Article:

  1. Read Also:  Laravel Ajax Autocomplete Search Box Example
  2. Read Also:  Angular 6 - User Registration and Login Example & Tutorial
  3. Read Also:  AngularJS Search Auto Suggestion box with PHP MySQLi
  4. Read Also:  Retrieve Data From MySQL Database using Vue.js PHP
  5. Read Also:  Ajax PHP MySQL Creating Autocomplete Search Suggestion
  6. Read Also:  Laravel Ajax Autocomplete Search Example
  7. Read Also:  Simple Vue 2.0 Hello World Example
  8. Read Also:  PHP String Concatenation Example with demo
  9. Read Also:  How to Open URL in New Tab using CSS
  10. Read Also:  PHP Set custom headers using cURL Example