Building an Autocomplete Component with Vue.js and PHP Laravel 5.6

Posted 5 years ago By Ajay Gupta 45540

In this Laravel and Vue.js Tutorials, I will let you know how to build an autocomplete component using Vue.js and Laravel 5.6

I will use axios for api call to get records from the table.

There is a simple built-in features to build an autocomplete component in Vue.js using v-model.

As of today, everyone has an idea of Autocomplete or Ajax Live Search used for searching. The live search is a feature that uses AJAX technology to provide search results or suggestions related to search within the same view.

This is a little bit different from a regular HTML input field that is provided with autocomplete powers for searching from the modern browsers like Chrome, Safari or Firefox.

If you search anything on Google or Youtube, you will notice that the search uses autocomplete feature. There are many tools available that provide this feature like jquery ui, Typehead, etc. but when you are working with vue js the result is quick as per your choice.

Step 1: Create categories Table and Model

In this first step, I am going to create table "categories" using php artisan command.

Run following command to create a migration file :

php artisan make:migration create_categories_table

After running above command, you will get a migration file in following path database/migrations.

Copy the below code and paste in your migration file to create a categories table.

<?php

use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class CreateCategoriesTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('categories', function (Blueprint $table) {
            $table->increments('id');
            $table->string('category_name');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('categories');
    }
}

Now run the following command :

php artisan migrate

Now I will create a model for category table, So run following command to create a model :

php artisan make:model Category

Step2 : Add Route

In this step, I will add two routes in routes/web.php file.

Route::get('autocomplete', 'CategoryController@autocomplete');
Route::get('search', 'CategoryController@search');

Step3 : Create Category Controller

In this step, I will create a new controller "CategoryController.php".

<?php


namespace App\Http\Controllers;


use Illuminate\Http\Request;
use App\Category;

class CategoryController extends Controller
{
   
    public function autocomplete()
    {
        return view('autocomplete');
    }

    public function search(Request $request)
    {
        $categories = Category::where('category_name','LIKE',$request->search.'%')->get();

        return response()->json($categories);
    }
}

Step4: Create Blade View File

In this last step, I will create a view file with a text box to search category.

resources/views/autocomplete.blade.php

<!DOCTYPE html>
<html>
<head>
    <title>Building an Autocomplete Component with Vue.js and PHP Laravel 5.6</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>Building an Autocomplete Component with Vue.js and PHP Laravel 5.6</h1>
            <div class="panel panel-primary">
                <div class="panel-heading">Please type here in text box to get search data</div>
                <div class="panel-body">
                    <auto-complete></auto-complete>
                </div>
            </div>
        </div>
    </div>
</div>


<script type="text/javascript">


    Vue.component('autoComplete', {
      template: '<div><input type="text" placeholder="Type here.." v-model="search" v-on:keyup="getSearchData" class="form-control"><div class="panel-footer" v-if="results.length"><ul class="list-group"><li class="list-group-item" v-for="result in results">@{{ result.category_name }}</li></ul></div></div>',
      data: function () {
        return {
          search: '',
          results: []
        }
      },
      methods: {
        getSearchData(){
        this.results = [];
        if(this.search.length > 0){
         axios.get('search',{params: {search: this.search}}).then(response => {
          this.results = response.data;
         });
        }
       }
      },
    })


    const app = new Vue({
        el: '#app'
    });
</script>


</body>
</html>

Try this..

Building an Autocomplete Component with Vue.js and PHP Laravel 5.6

Building an Autocomplete Component with Vue.js and PHP Laravel 5.6

Tags :

Related Posts

How to do form validation in laravel 5.6 using vue js and axios with example