In my example below I describe the various stages of implementing the search box in this particular instance.
A good example of a search box which has been used in a design, is Alibaba. Alibaba is a Chinese multinational conglomerate holding company specializing in e-commerce, retail, Internet, and technology.
Alibaba pairs an icon and label button with placeholder text that guides your search and promotes a conversation with the user asking what the user is looking for.
When you click inside on search box, then it appears some popular searches. This is very useful for someone that really want to find quickly and easily some products.
This website has a heavy content and it includes a sample search query in the input field to suggest to users what queries can be used.
In my example above I try to type the term “Clothes”. This an autocomplete method, which is a powerful tool to make interaction with search quick, efficient and also this tool reduces data input, but the user should make sure to limit the hint to just a few words, otherwise, it will increase the cognitive load.
In my example below the query didn’t erase after hit the search button and the original text is kept. This is very important because it didn’t have to re-type the entire query again.