Ejemplo simple para el filtro de búsqueda de VueJS

La búsqueda es un componente extremadamente importante en cada sitio web que contiene muchas categorías y componentes. Especialmente el sitio sobre comercio electrónico, blog, noticias, etc. Todos necesitan la función de búsqueda para seleccionar información.

Este artículo se aplica a la búsqueda rápida de datos en la matriz que se devuelve tan pronto como ingresa las palabras clave de búsqueda; a continuación, escribí cómo llamar a la API que devuelve la matriz de datos y suponiendo que haya una matriz de datos disponible.

Ejemplo simple para el filtro de búsqueda de VueJS

Primero, asumimos que existe una API que devuelve datos, incluido el título de la publicación y el nombre de la categoría del artículo:

datas: [
{ title:”Add weather and time zone information to your website from free API”, category:”VueJS” },
{ title:”How to import data from excel file, csv into the database and export back”, category:”PHP-MySQL” },
{ title:”PHP – MVC CRUD and Connect to MySQL using PDO”, category:”PHP-MySQL” },
{ title:”Automatically backup MySQL database with Batch file on Windows”, category:”PHP-MySQL” },
{ title:”Add and Remove input textbox with Jquery, Javascript”, category:”Jquery-Javascript” },
{ title:”Customizable multi-type, multi-y axis code ChartJS – Part 2″, category:”Jquery-Javascript” },
{ title:”Customizable multi-type, multi-y axis code ChartJS – Part 1″, category:”Jquery-Javascript” },
];

Si tiene VueJS instalado, genial, pero solo desea realizar una prueba rápida sin instalación, agregue la biblioteca VueJS como se muestra a continuación y agregue Bootstrap para usarla.

<script src=”https://cdn.jsdelivr.net/npm/vue@2.6.12″></script>
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css”>

Acerca de plantilla.vue

– Necesita un cuadro de entrada para ingresar la búsqueda de palabras clave, un ícono de carga muestra el tiempo que lleva mostrar los datosư

– resultQuery: si hay datos, los datos se recuperarán en el  for loop

<template>
<div class=”col-md-12 text-center”>
<div class=”col-md-4 p-0″>
<input type=”text” v-model=”quickSearch” placeholder=”Quick search…” class=”form-control”>
</div>
<p v-if=”loading” class=”text-center”><img :src=”‘https://softdownloadfree.com/uploads/images/loading-icon.gif’” alt=”loading” width=”35px”/></p>

<div class=”text-left” v-if=”resultQuery”>
<div class=”col-md-12 mb-1″ style=”display:inline-block” v-for=”item in resultQuery”>
<h3 v-if=”item.title”>{{ item.title }}</h3>
</div>
</div>
</div>
</template>

Acerca del procesamiento de datos de resultQuery:

– Si no ha ingresado la palabra clave de búsqueda, los datos mostrarán todos los valores en la matriz de datos que se recuperaron (devuelva this.datas).

– Al ingresar palabras clave de búsqueda, puede buscar solo por título o por múltiples argumentos (la búsqueda de VueJS filtra múltiples argumentos). A continuación se muestra la búsqueda por título y categoría, y no distingue entre mayúsculas y minúsculas.

<script type=”text/javascript”>
export default {
data () {
return {
error: null,
loading: true,
datas: [
{ title:”Add weather and time zone information to your website from free API”, category:”VueJS” },
{ title:”How to import data from excel file, csv into the database and export back”, category:”PHP-MySQL” },
{ title:”PHP – MVC CRUD and Connect to MySQL using PDO”, category:”PHP-MySQL” },
{ title:”Automatically backup MySQL database with Batch file on Windows”, category:”PHP-MySQL” },
{ title:”Add and Remove input textbox with Jquery, Javascript”, category:”Jquery-Javascript” },
{ title:”Customizable multi-type, multi-y axis code ChartJS – Part 2″, category:”Jquery-Javascript” },
{ title:”Customizable multi-type, multi-y axis code ChartJS – Part 1″, category:”Jquery-Javascript” },
];
quickSearch: null,
}
},
computed: {
resultQuery() {
if (this.quickSearch) {
return this.datas.filter((item)=>{
return this.quickSearch.toLowerCase().split(‘ ‘).every(v => item.title.toLowerCase().includes(v) || item.category.toLowerCase().includes(v))
})
} else {
return this.datas;
}
},
}
}
</script>

En este punto, hemos completado el filtro de búsqueda simple de vuejs con los datos proporcionados.

Si obtiene los datos devueltos por la API, debe usar axios para hacerlo.

Las funciones beforeRouteEnter y beforeRouteUpdate se utilizan para cargar los datos de prioridad tan pronto como se carga la página.

<script type=”text/javascript”>
import axios from ‘axios’;
const getData = (page, callback) => {
const params = { page };
axios
.get(‘/api/post’, { params })
.then(response => {
callback(null, response.data);
})
.catch(error => {
callback(error, response);
});
};

export default {
data () {
return {
error: null,
loading: true,
datas: null,
quickSearch: null,
}
},
computed: {
resultQuery() {
if (this.quickSearch) {
return this.datas.filter((item)=>{
return this.quickSearch.toLowerCase().split(‘ ‘).every(v => item.title.toLowerCase().includes(v) || item.category.toLowerCase().includes(v))
})
} else {
return this.datas;
}
},
beforeRouteEnter(to, from, next) {
getData(to.query.page, (err, results) => {
next(vm => vm.setData(err, results));
})
},
beforeRouteUpdate(to, from, next) {
this.loading = true;
this.results = null;
getData(to.query.page, (err, results) => {
this.setData(err, results);
next();
})
},
methods: {
setData(err, {results}) {
this.loading = true;
if (err) {
this.err = err.toString();
} else {
this.loading = false;
this.datas = results;
}
},
}
}
}
</script>

Entonces hemos completado la función de búsqueda rápida con múltiples parámetros usando VueJS.

Puede consultar los resultados en la página de inicio: https://softwaregratiss.online/ o en la página de categoría del sitio https://softwaregratiss.online/category/vuejs/

Gracias por leer el artículo.

Deja un comentario