0

Como puedo hacer para que este input filtre los datos de busqueda desde esta api http://mobileapi.lbby.online/api/Contactos/ObtenerListado

<Input placeholder="Buscar" onChangeText={text => this.searchFilterFunction(text)}/>


searchFilterFunction = text => {
    this.setState({
      value: text,
    });

    const newData = this.state.Items.filter(item => {
      const itemData = `${item.NombreCompleto.toUpperCase()} ${item.CorreoElectronico.toUpperCase()} ${item.Id}`;
      const textData = text.toUpperCase();

      return itemData.indexOf(textData) > -1;
    });
    this.setState({
        Items: newData,
    });
};

Tengo un bug al no tener nada escrito no me manda ningun array, en lugar de mandarmelos todos

2
  • Puedes poner lo que intentastes? Commented el 2 mar. 2021 a las 22:15
  • la logica es sencilla pon una lista debajo del input , en react native seria elevation en android y z index en ios, para ponerlos encima de otro el orden. cada vez que se acutalize buscas los datos y los muestras en una lista debajo del input.
    – OsAndNoTi
    Commented el 6 mar. 2021 a las 5:20

1 respuesta 1

0

Puedes usar la propiedad filter de los array de JavaScript para crear tu propio buscador te dejo un ejemplo. https://www.w3schools.com/howto/howto_js_filter_lists.asp

Si no te quieres complicar la vida puedes usar un packages que ya lleve el sistema de filtro y reutilizarlo como es el siguiente. https://yarnpkg.com/package/react-search-input

1
  • Lo hice con el filter pero tengo un bug mira este es mi codigo searchFilterFunction = text => { this.setState({ value: text, }); const newData = this.state.Items.filter(item => { const itemData = ${item.NombreCompleto.toUpperCase()} ${item.CorreoElectronico.toUpperCase()} ${item.Id}; const textData = text.toUpperCase(); return itemData.indexOf(textData) > -1; }); this.setState({ Items: newData, }); };
    – Xon
    Commented el 4 mar. 2021 a las 15:43

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.