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:  return view in new tab laravel Example Tutorial

php artisan make:seeder UsersTableSeeder

Simple Add Route and Controller in Laravel

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


    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


    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','');
            foreach ($products as $product) {
                 return $data;
                return ['value'=>'sorry No any Result Found','id'=>''];

Create Blade File

Read Also:  PHP Server Side Form Validation | clear form after submit

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

       <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')) !!}
       $(document).ready(function() {
        src = "{{ route('searchajax') }}";
            source: function(request, response) {
                    url: src,
                    dataType: "json",
                    data: {
                        term : request.term
                    success: function(data) {
            minLength: 3,

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

Read Also:  Laravel Twitter Typeahead integration

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