VueJs Autocomplete using Laravel Example

VueJs Autocomplete using Laravel Example

In this Post We Will Explain About is VueJs Autocomplete using Laravel Example With Example and Demo.

Welcome on infinityknow.com – Examples ,The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to Autocomplete using Laravel and VueJs

In this post we will show you Best way to implement Laravel and vuejs components input autocomplete, hear for How to Laravel autocomplete with Vuejs search colors array example with Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.

Creating a simple new Laravel project using vuejs

cd autocomplete/
php artisan serve
localhost:8000 
php artisan make:auth

welcome.blade.php

@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row">
        <div class="col-sm-8">
            <div class="panel panel-default">
                <div class="panel-heading">Please Enter your string and search</div>
                <div class="panel-body">
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

Creating autocomplete component

Inside your here folder to resources/assets/js/components simple create a new laravel file called simple vuejs Autocomplete.vue

 <div>
  
  <div class="panel-footer">
   <ul class="list-group">
    <li class="list-group-item">
     {{ result.name }}
    </li>
   </ul>
  </div>
 </div>


 export default{
  getdata(){
   return {
    searchquery: '',
    data_results: []
   }
  },
  methods: {
   autoComplete(){
    this.data_results = [];
    if(this.searchquery.length > 2){
     axios.get('/api/search',{params: {searchquery: this.searchquery}}).then(response => {
      this.data_results = response.getdata;
     });
    }
   }
  }
 }

Now, and then go to simple vuejs code to app.js folder here resources/assets/js usig laravel and register simple your create autocomplete.vue.

Vue.component('autocomplete',require('./components/Autocomplete.vue'));

and then you have simple registered our component dynemically you may use it as a html simple tag as inside our web-application. here put code to welcome.blade.php and place the HTML tag.

<div class="panel-body">
    
</div>

Create a simple new database and setting to .env file all setting here to database settings.

DB_CONNECTION=mysql
DB_HOST=infinityknow.com
DB_PORT=3306
DB_DATABASE=myliveauto
DB_USERNAME=liveu
DB_PASSWORD=live$^&256

create a simple UsersTableSeeder and class inside laravel,path database/seeds Folder

[/php]
$faker->name,
’email’ => $faker->unique()->safeEmail,
‘password’ => bcrypt(‘secret’),
‘remember_token’ => str_random(10),
];
User::create($getdata);
}
}
}
[/php]

first off all have done simple, and go to cmd terminal

php artisan migrate
php artisan db:seed

php artisan make:seeder UsersTableSeeder

Inside simple routes/api.php Add the code

Route::get('/search',function(){
 $searchquery = Input::get('searchquery');
 $students = User::where('name','like','%'.$searchquery.'%')->get();
 return response()->json($students);
});

and then which you send our simple vuejs search request getdata and simple get data_results.

npm install
npm run dev

Last step to finally run your Laravel web- application as well as and visit your simple browser and more type localhost:8000

php artisan serve

Example

I hope you have Got Vuejs And Typeahead Auto Complete using Laravel And how it works.I would Like to have FeadBack From My Blog(infinityknow.com) readers.Your Valuable FeadBack,Any Question,or any Comments abaout This Article(infinityknow.com) Are Most Always Welcome.