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

onlinecode

2 years ago

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

In this post we will give you information about Building an Autocomplete Component with Vue.js and PHP Laravel 5.6. Hear we will give you detail about Building an Autocomplete Component with Vue.js and PHP Laravel 5.6And how to use it also give you demo for it if it is necessary.

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.

See also React Infinite Scroll tutorial

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 IlluminateSupportFacadesSchema;
use IlluminateDatabaseSchemaBlueprint;
use IlluminateDatabaseMigrationsMigration;

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

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    publicfunctiondown()
    {
        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 AppHttpControllers;


use IlluminateHttpRequest;
use AppCategory;

classCategoryControllerextends Controller
{
   
    publicfunctionautocomplete()
    {
        return view('autocomplete');
    }

    publicfunctionsearch(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>
    <linkhref="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>


<divclass="container"id="app">
    <divclass="row">
        <divclass="col-sm-8">
            <h1>Building an Autocomplete Component with Vue.js and PHP Laravel 5.6</h1>
            <divclass="panel panel-primary">
                <divclass="panel-heading">Please type here in text box to get search data</div>
                <divclass="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" ><div  v-if="results.length"><ul ><li  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 >){
         axios.get('search',{params: {search:this.search}}).then(response => {
          this.results = response.data;
         });
        }
       }
      },
    })


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


</body>
</html>

Try this..

Label :

PHP

MySQL

Laravel PHP Framework

HTML

How To

MVC

Web Development

Bootstrap

JavaScript

Vue.js

Hope this code and post will helped you for implement Building an Autocomplete Component with Vue.js and PHP Laravel 5.6. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs

For More Info See :: laravel And github