Today, we will learn ajax live hunt and autocomplete involving vue js parts in laravel 5.6 application. here we will make straightforward and pleasant illustration of autocomplete in vue.js utilizing laravel programming interface. we will utilize axios for getting records in vue js, so follow this instructional exercise and get full model.
As we probably are aware everyone knows all about the idea of Ajax Live Inquiry or Autocomplete for search. On the off chance that you search on google, youtube or some other renowned site, we can see like hunt with autocomplete. there are additionally accessible devices for autocomplete like jquery ui and Typeahead and so on, however on the off chance that you are working with vue js, you can do it speedy and as you need to make it.
So fundamentally you want to follow underneath step and finish all step. You will see autocomplete. You can likewise check demo I added connect finally of instructional exercise.
Step 1: Create tags Table and Model
in first step, we are going to create autocomplete with tags. so we have to create migration for "tags" table using Laravel 5.6 php artisan command, so first fire bellow command:
php artisan make:migration create_tags_table --create=tags
After this command you will find one file in following path "database/migrations" and you have to put bellow code in your migration file for create tags table.
<?php
use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
class CreateTagsTable extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('tags', function (Blueprint $table) {
$table->increments('id');
$table->string('name');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('tags');
}
}
Now we need to create model for tags table so let's create model.
app/Tag.php
<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
class Tag extends Model
{
/**
* The attributes that are mass assignable.
*
* @var array
*/
protected $fillable = [
'name'
];
}
Step 2: Add Route
In this is step we need to add routes for tag autocomplete. so open your "routes/web.php" file and add following route.
routes/web.php
Route::get('vuejs/autocomplete', 'VueJSController@autocomplete');
Route::get('vuejs/autocomplete/search', 'VueJSController@autocompleteSearch');
Step 3: Create Controller
Here, in this step we need to create new controller for create tag autocomplete example. so create "VueJSController" controller and put bellow code:
app/Http/Controllers/VueJSController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Tag;
class VueJSController extends Controller
{
/**
* Show the application dashboard.
*
* @return \Illuminate\Http\Response
*/
public function autocomplete()
{
return view('vuejsAutocomplete');
}
/**
* Show the application dashboard.
*
* @return \Illuminate\Http\Response
*/
public function autocompleteSearch(Request $request)
{
$searchquery = $request->searchquery;
$data = Tag::where('name','like','%'.$searchquery.'%')->get();
return response()->json($data);
}
}
Step 4: Create Blade File
In the last step, we need to create vuejsAutocomplete.blade.php file for autocomplete view. so create bellow file and put bellow code on it.
resources/views/vuejsAutocomplete.blade.php
<!DOCTYPE html>
<html>
<head>
<title>Autocomplete Vue js using Laravel</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" >
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script>
</head>
<body>
<div class="container" id="app">
<div class="row">
<div class="col-sm-8">
<h1>Autocomplete Vue js using Laravel</h1>
<div class="panel panel-default">
<div class="panel-heading">Please Enter for Search</div>
<div class="panel-body">
<autocomplete></autocomplete>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
Vue.component('autocomplete', {
template: '<div><input type="text" placeholder="what are you looking for?" v-model="searchquery" v-on:keyup="autoComplete" class="form-control"><div class="panel-footer" v-if="data_results.length"><ul class="list-group"><li class="list-group-item" v-for="result in data_results">@{{ result.name }}</li></ul></div></div>',
data: function () {
return {
searchquery: '',
data_results: []
}
},
methods: {
autoComplete(){
this.data_results = [];
if(this.searchquery.length > 2){
axios.get('/vuejs/autocomplete/search',{params: {searchquery: this.searchquery}}).then(response => {
console.log(response);
this.data_results = response.data;
});
}
}
},
})
const app = new Vue({
el: '#app'
});
</script>
</body>
</html>
0 comments:
Post a Comment
Thanks