Untitled
unknown
javascript
3 years ago
1.6 kB
5
Indexable
import React, { useCallback, useState } from "react"; const debounce = (func, wait) => { let timeout; return function (...args) { const context = this; if (timeout) clearTimeout(timeout); timeout = setTimeout(() => { timeout = null; func.apply(context, args); }, wait); }; }; function App() { const [inputText, setInputText] = useState(""); const [searchSuggestions, setSearchSuggestions] = useState([]); const getSearchResults = async (val) => { const response = await fetch("https://api.npms.io/v2/search?q=" + val); const data = await response.json(); setSearchSuggestions(data.results); }; const debounceSearchRequest = useCallback( debounce((value) => getSearchResults(value), 1000), [] ); const onInputChangeHandler = (e) => { setInputText(e.target.value); debounceSearchRequest(e.target.value); }; return ( <div className="App" style={{ display: "flex", alignItems: "center", justifyContent: "center", height: "100vh", }} > <label htmlFor="search-input">Search:</label> <input id="search-input" list="searchSuggestions" onChange={onInputChangeHandler} on value={inputText} /> <datalist id="searchSuggestions"> {searchSuggestions?.map((suggestion, index) => { return ( <option value={suggestion.package.name} key={"suggestion.package.name" + index} ></option> ); })} </datalist> </div> ); } export default App;
Editor is loading...