Download or Include
axios
https://github.com/axios/axios
Using jsDelivr CDN: https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js
VueJS
https://vuejs.org/v2/guide/installation.html
CDN : https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js
CREATE TABLE `employee` (
`id` int(11) NOT NULL,
`name` varchar(100) NOT NULL,
`position` varchar(100) NOT NULL,
`office` varchar(100) NOT NULL,
`age` int(11) NOT NULL,
`salary` int(11) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
INSERT INTO `employee` (`id`, `name`, `position`, `office`, `age`, `salary`) VALUES
(1, 'Tiger Wood', 'Accountant', 'Tokyo', 36, 5689),
(2, 'Mark Oto Ednalan', 'Chief Executive Officer (CEO)', 'London', 56, 5648),
(3, 'Jacob thompson', 'Junior Technical Author', 'San Francisco', 23, 5689),
(4, 'cylde Ednalan', 'Software Engineer', 'Olongapo', 23, 54654),
(5, 'Rhona Davidson', 'Software Engineer', 'San Francisco', 26, 5465),
(6, 'Quinn Flynn', 'Integration Specialist', 'New York', 53, 56465),
(8, 'Tiger Nixon', 'Software Engineer', 'London', 45, 456),
(9, 'Airi Satou updated', 'Pre-Sales Support updated', 'New York', 25, 4568),
(10, 'Angelica Ramos updated', 'Sales Assistant updated', 'New York', 45, 456),
(11, 'Ashton updated', 'Senior Javascript Developer', 'Olongapo', 45, 54565),
(12, 'Bradley Greer', 'Regional Director', 'San Francisco', 27, 5485),
(13, 'Brenden Wagner', 'Javascript Developer', 'San Francisco', 38, 65468),
(14, 'Brielle Williamson', 'Personnel Lead', 'Olongapo', 56, 354685),
(15, 'Bruno Nash', 'Customer Support', 'New York', 36, 65465),
(16, 'cairocoders', 'Sales Assistant', 'Sydney', 45, 56465),
(17, 'Zorita Serrano', 'Support Engineer', 'San Francisco', 38, 6548),
(18, 'Zenaida Frank', 'Chief Operating Officer (COO)', 'San Francisco', 39, 545),
(19, 'Sakura Yamamoto', 'Support Engineer', 'Tokyo', 48, 5468),
(20, 'Serge Baldwin', 'Data Coordinator', 'Singapore', 85, 5646),
(21, 'Shad Decker', 'Regional Director', 'Tokyo', 45, 4545);
ALTER TABLE `employee`
ADD PRIMARY KEY (`id`);
ALTER TABLE `employee`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=22;
//index.php
<!DOCTYPE html>
<html>
<head>
<title>Vue.js Axios Live Search using PHP Mysqli</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
</head>
<body>
<div id="vueappsearch">
<div class="container">
<h1 class="page-header text-center">Vue.js Axios Live Search using PHP Mysqli</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 Name or Position" v-on:keyup="searchMonitor" v-model="search.keyword">
</div>
</div>
<div style="height:5px;"></div>
<table class="table table-bordered table-striped">
<thead>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Salary</th>
</thead>
<tbody>
<tr v-if="noMember">
<td colspan="2" align="center">No member match your search</td>
</tr>
<tr v-for="member in employee">
<td>{{ member.name }}</td>
<td>{{ member.position }}</td>
<td>{{ member.office }}</td>
<td>{{ member.age }}</td>
<td>{{ member.salary }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<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>
<script src="vuesearchapp.js"></script>
</body>
</html>
vuesearchapp.js
//vuesearchapp.js
var app = new Vue({
el: '#vueappsearch',
data:{
employee: [],
search: {keyword: ''},
noMember: false
},
mounted: function(){
this.fetchemployee();
},
methods:{
searchMonitor: function() {
var keyword = app.toFormData(app.search);
axios.post('action.php?action=search', keyword)
.then(function(response){
app.employee = response.data.employee;
if(response.data.employee == ''){
app.noMember = true;
}
else{
app.noMember = false;
}
});
},
fetchemployee: function(){
axios.post('action.php')
.then(function(response){
app.employee = response.data.employee;
});
},
toFormData: function(obj){
var form_data = new FormData();
for(var key in obj){
form_data.append(key, obj[key]);
}
return form_data;
},
}
});
action.php
//action.php
<?php
$conn = new mysqli("localhost", "root", "", "testingdb");
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$out = array('error' => false);
$action="show";
if(isset($_GET['action'])){
$action=$_GET['action'];
}
if($action=='show'){
$sql = "select * from employee";
$query = $conn->query($sql);
$employee = array();
while($row = $query->fetch_array()){
array_push($employee, $row);
}
$out['employee'] = $employee;
}
if($action=='search'){
$keyword=$_POST['keyword'];
$sql="select * from employee where name like '%$keyword%' or position like '%$keyword%'";
$query = $conn->query($sql);
$employee = array();
while($row = $query->fetch_array()){
array_push($employee, $row);
}
$out['employee'] = $employee;
}
$conn->close();
header("Content-type: application/json");
echo json_encode($out);
die();
?>
