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();

?>
Shares:

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *