Live Search using Vue.js with PHP

By CampCodes Administrator

Updated on: February 15, 2021

Table of Contents

Getting Started

I’ve used CDN for Bootstrap, Vue.js and Axios.js so; you need an internet connection for them to work.

Creating a Database

1. Open phpMyAdmin.

2. Click databases, create a database and name it as vuetot.

3. After creating a database, click the SQL and paste the below codes. See image below for detailed instruction.

CREATE TABLE `members` (
  `memid` INT(11) NOT NULL AUTO_INCREMENT,
  `firstname` VARCHAR(30) NOT NULL,
  `lastname` VARCHAR(30) NOT NULL,
PRIMARY KEY(`memid`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

Inserting Data into a Database

Next, we insert sample data into our database to use in our search.

1. Click vuetot database that we have created earlier.

2. Click SQL and paste the following codes.

INSERT INTO `members` (`memid`, `firstname`, `lastname`) VALUES
(1, 'neovic', 'devierte'),
(2, 'gemalyn', 'cepe'),
(3, 'gemalyn', 'devierte'),
(4, 'julyn', 'divinagracia');

3. Click Go button below.

index.php

This contains our sample table and our search input.

<!DOCTYPE html>
<html>
<head>
    <title>Live Search using Vue.js with PHP</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.10/vue.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.17.1/axios.min.js"></script>
</head>
<body>
<div id="myapp">
    <div class="container">
        <h1 class="page-header text-center">Live Search using Vue.js with PHP</h1>
        <div class="col-md-8 col-md-offset-2">
            <div class="row">
                <div class="col-md-4 col-md-offset-8">
                    <input type="text" class="form-control" placeholder="Search Firstname or Lastname" v-on:keyup="searchMonitor" v-model="search.keyword">
                </div>
            </div>
            <div style="height:5px;"></div>
            <table class="table table-bordered table-striped">
                <thead>
                    <th>Firstname</th>
                    <th>Lastname</th>
                </thead>
                <tbody>
 
                        <tr v-if="noMember">
                            <td colspan="2" align="center">No member match your search</td>
                        </tr>
 
                    <tr v-for="member in members">
                        <td>{{ member.firstname }}</td>
                        <td>{{ member.lastname }}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
<script src="app.js"></script>
</body>
</html>

app.js

This contains our vue.js code.

var app = new Vue({
    el: '#myapp',
    data:{
        members: [],
        search: {keyword: ''},
        noMember: false
    },
 
    mounted: function(){
        this.fetchMembers();
    },
 
    methods:{
        searchMonitor: function() {
            var keyword = app.toFormData(app.search);
       		axios.post('action.php?action=search', keyword)
                .then(function(response){
                    app.members = response.data.members;
 
                    if(response.data.members == ''){
                        app.noMember = true;
                    }
                    else{
                        app.noMember = false;
                    }
                });
       	},
 
       	fetchMembers: function(){
            axios.post('action.php')
                .then(function(response){
                    app.members = response.data.members;
                });
       	},
 
        toFormData: function(obj){
            var form_data = new FormData();
            for(var key in obj){
                form_data.append(key, obj[key]);
            }
            return form_data;
        },
 
    }
});

That ends this tutorial. Happy Coding!

Download Here