Estoy tratando de recuperar 10 nombres de usuario cuando escribo una tecla. Por ahora, solo me devuelve un nombre de usuario si el nombre de usuario está exactamente en la lista de marcadores de posición json. Así que cuando escribo "Karia" nada regresa hasta que escribo "Karianne"
Entonces, por ejemplo, si la entrada obtiene la primera letra "A", quiero devolver los primeros 10 elementos que coinciden de la lista de marcadores de posición json. Si pongo una "R", después de eso, es "Ar", quiero recuperar los primeros 10 nombres de usuario "Ar" que coincidan, como Aron, Ariel, Aria, etc.
¿Alguien tiene una idea?
export const Search = () => { const [user, setUser] = useState(null); const [searchQuery, setSearchQuery] = useState("") useEffect(() => { if (searchQuery.length > 0) { const fetchFunc = async () => { const response = await fetch(`https://jsonplaceholder.typicode.com/users?username=${searchQuery}`) const resJSON = await response.json(); setUser(resJSON[0]); }; fetchFunc(); } }, [searchQuery]); return ( <Flex className={styles.search__container}> <Flex className={styles.search__elements}> <InputGroup className={styles.search__input}> <InputRightElement className={styles.search__inputElements} children={<RiSearchLine className={styles.search__icon} />} /> <Input className={styles.search__users} type='search' placeholder='Search' onChange={event => setSearchQuery(event.target.value)} /> {user ? ( <div> <h3>{user['name']}</h3> <h3>{user['username']}</h3> <h3>{user['email']}</h3> </div> ) : ( <p>No user found</p> )} </InputGroup> </Flex> </Flex> ) }La principal limitación aquí está en el lado de la API. Su API debe proporcionarle los nombres similares. Si no es así, entonces no puedes hacer mucho.
Tal vez la API proporcione una forma de recuperar usuarios con nombres parciales (pero dudo que sea el caso). De lo contrario, puede recuperar todos los usuarios una vez y simplemente mostrar el que se ajuste a sus requisitos cada vez que escriba algo.
Para resumir: cuando su componente esté montado (al principio), busque a todos los usuarios y almacénelos. Realizará esta llamada a la API solo una vez.
Luego, cada vez que escriba algo, simplemente tome los 10 usuarios que tienen un nombre que incluye lo que escribió.
Idealmente, esto debería ser manejado por la API, y debería preocuparse por cuándo activar o volver a activar la llamada a la API.
La API le proporciona una lista de nombres, corta un conjunto de 10 de la lista de nombres y lo configura en usuarios, y luego simplemente los mapea en su interfaz de usuario.
Además, tal vez podría optimizar aún más la función eliminando el rebote de la llamada API.