0

Tengo la siguiente lista:

let gente = ["aaron","beth","cara","daniel","ella","fin","george","maria","bety"]

La idea aqui es que tengo un campo para buscar en esa lista, o sea un criterio de busqueda, si tecleo "be" la lista solo me debe debolver ["beth","bety"], pero si borro el criterio "be" debe mostrarme toda la lista original.

he probado con filter

gente = gente.filter(x => x == criterio);

pero se me modifica la lista original y despues no puedo devolverla como estaba al inicio si se borra el criterio

3
  • 3
    Pues no la sobreescribas si no la quieres modificar. Asígnala a otra variable que no sea gente.
    – Jaime
    Commented el 31 ago. 2022 a las 2:45
  • Hola estoy usando vue, y para que se vea el cambio del filtro debes pasar el nuevo arreglo filtrado a la misma variable Commented el 31 ago. 2022 a las 12:50
  • Debes tener 2 variables... no puede ser la misma que tenga los datos originales y la misma que usa los datos filtrados. deben ser 2.
    – Pipe
    Commented el 31 ago. 2022 a las 12:59

2 respuestas 2

3

Dado que en un comentario especificas que estás utilizando VueJS, aprovecharé de llevar la solución directamente a dicho framework. Para hacerlo en JS Vanilla (Puro), debes vincular los respectivos listeners, cosa que vue hace por detrás de escena y te permite olvidar.

La lógica es bastante simple, si en tu buscador hay un texto, filtramos el array mediante filter y al mismo tiempo comprobamos los elementos con includes. Nótese que convertimos todo a minúscula para que la búsqueda no sea Case Sensitive.

filter retorna un nuevo array con los elementos que cumplan la condición, así que no estamos modificando nunca el arreglo original.

Vue al detectar un cambio en la variable search, recalculará todos los métodos donde esta esté involucrada, pero recuerda que si quieres hacerlo con js vanilla, deberás agregar los respectivos listeners para los eventos.

new Vue({
  el: "#app",
  data() {
    return {
      people : [],
      search: null
    }
  },
  created(){
    this.people = ["aaron","beth","cara","daniel","ella","fin","george","maria","bety"]
  },
  computed: {
    filtered_people(){
      if(this.search != null && this.search.length > 0){
        return this.people.filter(people => {
          return people.toLowerCase().includes(this.search.toLowerCase())
        })
      }else{
        return this.people
      }
    }
  }
});
<div id="app">
  <input v-model="search" type="text" placeholder="Buscar..."/>
  <p>Your search input is: {{search}}</p>
  <p v-text></p>
  <p>{{filtered_people}}</p>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

1
  • Perfecto, eso es lo que estaba buscando, gracias Commented el 31 ago. 2022 a las 13:41
0

Aquí se declara la variable gente como let, esto permite que la misma sea reasignada.

let gente = ["aaron","beth","cara","daniel","ella","fin","george","maria","bety"]

Aquí se sobreescribe la variable gente con el resultado del filter que es un nuevo array que contiene los items que cumplieron con el criterio dentro del callback.

gente = gente.filter(x => x == criterio);

Se podría hacer algo así:

const gente =[ "aaron","beth","cara","daniel","ella","fin","george","maria","bety"]

Luego:

const genteConFiltro = gente.filter(x => x == criterio);

Y finalmente mostrar los resultados de genteConFiltro

Al borrar el texto por el que se desea filtrar, el filter devolverá todos los elementos que cumplan con "", por lo que devolverá todos los elementos del array gente.

2
  • El problema aqui es que siempre debo trabajar con el mismo arreglo gente, estoy usando vue, esa lista se esta mostrando cuando filtras se debe el resultado del filtro en el mismo arreglo original Commented el 31 ago. 2022 a las 12:54
  • En ese caso podrías tener la lista original afuera del data de Vue y en Vue pasar siempre el filtrado.. Commented el 31 ago. 2022 a las 17:41

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.