OnFocus: This refers to when the focus is on the input.

onBlur: This refers to when the focus is removed.

https://tigerabrodi.blog/debounce-and-throttle

Search recommendation :

• Design an nput box with some height, width, and border.
• Design a recommendation list that looks similar to the input box.

Example :

• Create a state variable to store user queries.
• Create a state variable to store the API recommendation data.
• Create a state variable to store the visibility of the recommendation list. Depends on the focus and blur event. If the user is focused on input, then it will show a recommendation list, and if the user clicks outside of the input box, then it will hide the recommendation list.

const [query, setQuery] = useState("")
const [recommendation, setRecommendation] = useState([])
const [isVisibleList, setIsVisibleList] = useState(false)

<input
	type ="text"
	onChange={}
	onFocus ={()=> setIsVisibleList(true)}
	onBlur ={()=> setIsVisibleList(flase)}
/>
{recommendations.length>0 && isVisibleList &&(
	<ul>
		{recommendations.map((data) => <li>{data} </li>)}
	</ul>
) 
}

Errors: 1 - Google search API doesn't allow access to the API, so apply a hack to override the error. The hack is to add a client=firefox param before the query param. https://www.googole.com/complete/search?client=firefox &q=query example : https://www.google.com/complete/search?client=firefox&q=shiva

2 - CORS error: You can avoid it by installing the CORS extension.