Empezando
Este pequeño script es para realizar búsquedas en tiempo real sin recargar la página para esto hago uso de Vue.js y PHP
Base de datos
Debes ejecutar el siguiente script de la base de datos en PHPMyAdmin, solo es una tabla con datos del nombre y apellido.
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;INSERT INTO `members` (`memid`, `firstname`, `lastname`) VALUES
(1, 'juan', 'sanchez'),
(2, 'pedro', 'vargas'),
(3, 'alex', 'dallas'),
(4, 'ana', 'torrez');index.php
El archivo index contiene la tabla y la barra de búsqueda
<!DOCTYPE html>
<html>
<head>
<title>Busqueda en tiempo real usando Vue.js y PHP</title>
<link rel="stylesheet" href="<a href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"" rel="nofollow">https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"</a> />
<script src="<a href="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.10/vue.min.js"></script>
" rel="nofollow">https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.10/vue.min.js"></script>
</a> <script src="<a href="https://cdnjs.cloudflare.com/ajax/libs/axios/0.17.1/axios.min.js"></script>
</head>
<body>
<div" rel="nofollow">https://cdnjs.cloudflare.com/ajax/libs/axios/0.17.1/axios.min.js"></scri...</a> id="myapp">
<div class="container">
<h1 class="page-header text-center">Busqueda en tiempo real usando Vue.js y 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="Buscar primer nombre - apellido" v-on:keyup="searchMonitor" v-model="search.keyword">
</div>
</div>
<div style="height:5px;"></div>
<table class="table table-bordered table-striped">
<thead>
<th>nombre</th>
<th>apellido</th>
</thead>
<tbody>
<tr v-if="noMember">
<td colspan="2" align="center">Ningún miembro coincide con su búsqueda</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
Luego viene el código Vue el cual permite la búsqueda de los parámetros escritos en la barra de búsqueda.
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;
},
}
});action.php
Para finalizar este ejemplo el siguiente código se encarga de recuperar los datos de la tabla, es importante agregar tus datos de conexión.
<?php
$conn = new mysqli("localhost", "root", "", "vuetot");
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 members";
$query = $conn->query($sql);
$members = array();
while($row = $query->fetch_array()){
array_push($members, $row);
}
$out['members'] = $members;
}
if($action=='search'){
$keyword=$_POST['keyword'];
$sql="select * from members where firstname like '%$keyword%' or lastname like '%$keyword%'";
$query = $conn->query($sql);
$members = array();
while($row = $query->fetch_array()){
array_push($members, $row);
}
$out['members'] = $members;
}
$conn->close();
header("Content-type: application/json");
echo json_encode($out);
die();
?>
