Code
const [searchquery, setSearchquery] = useState("");
const [suggestions, setSuggestions] = useState([]);
const fetchSuggestions = useCallback(
_.debounce(
(searchTerm) => fetchSuggestionsFromAPI(searchTerm, setSuggestions),
2500
),
[]
);
useEffect(() => {
fetchSuggestions(searchquery);
}, [searchquery, fetchSuggestions]);
const fetchSuggestionsFromAPI = async (searchTerm, setSuggestions) => {
if (searchTerm.length > 0) {
try {
const response = await fetch(
// `https://jsonplaceholder.typicode.com/users?name_like=${searchTerm}`
`https://www.omdbapi.com/?apikey=ef5a070&s=${searchTerm}&type=movie`
);
if (!response.ok) {
throw new Error("Failed to fetch suggestions");
}
const data = await response.json();
const { Search } = data;
setSuggestions(Search);
} catch (error) {
console.error("Error fetching suggestions:", error);
setSuggestions([]);
}
} else {
setSuggestions([]);
}
};