Reaccionar: ¿Cómo se filtran los resultados de búsqueda en función de varios valores (independientemente del orden en que se escriban las palabras) Ejemplo: Quiero poder buscar el título de un documento si escribo "proceso de reparación del teléfono", "proceso de reparación del teléfono ", o "procesar la reparación del teléfono".
(Actualmente, la búsqueda solo funciona si no omito palabras y deben estar en orden) Nota: todavía estoy aprendiendo React e intenté buscar esta información por mi cuenta sin suerte.
A continuación se muestra mi código:
Aplicación.js
class App extends Component { constructor() { super() this.state = { documents: documents, searchField: '', } } onSearchChange = (event) => { this.setState({searchField: event.target.value}) } render() { const filteredDocuments = this.state.documents.filter(documents => { return documents.title.toLowerCase().includes(this.state.searchField.toLowerCase()) }) return ( <div> <h1 className='p-5 text-teal-800 text-xl'>Documentation</h1> <div className='p-5'> <Searchbox searchChange={this.onSearchChange} /> </div> <div> <Button /> </div> <div className='m-5 md:m-10 xl:m-20'> <CardList documents={filteredDocuments} /> </div> </div> ); } } export default App;Cuadro de búsqueda.js
import React from "react"; const Searchbox =({searchChange}) => { return ( <input type="search" placeholder='Search Document Title...' className='bg-gray-100 rounded-md px-2 py-1 border border-gray-400 outline-none' onChange={searchChange} /> ) } export default Searchbox;es más una pregunta de javascript que un React. la única parte que realmente necesita editar es
const filteredDocuments = this.state.documents.filter(documents => { return documents.title.toLowerCase().includes(this.state.searchField.toLowerCase())intente dividir la cadena en una matriz de palabras:
const words = this.state.searchField.toLowerCase().split(" "); luego use el método every en Boolean. que comprueba si se cumple una condición en cada elemento.
const filteredDocuments = this.state.documents.filter(document => { return words.every(word => document.title.toLowerCase().includes(word)) })debe tener en cuenta que este método busca la cadena palabra por palabra y no le importa si las palabras están cerca unas de otras.
Sugiero usar bibliotecas especializadas como Fuse.js que proporcionan API de búsqueda potentes y fáciles de usar.