Using filtering and search on products
I'm developing a website for a supermarket and I'm facing some difficulties when building the searching product design. Just to give the context, I'm working with more than 10 categories and over 10.000 products.
Currently I have this simple design:
The "search" options on this would be:
- Select an specific category;
- Sort the list (
A-Z
,Z-A
,Lowest price
andMore sales
); - Filter the
Category
by typing something on the search bar (this will only filter the current selected category);
The problem is that typing on the search bar is only going to filter the list already displayed.
I'd like to also have a feature where the user search for something and it will make a request to the database to search within all the possible categories. But I'm finding it difficult to represent it on the current design.
I could add another search bar on the header, but I think it's not going to be very clear on why there is 2 search bars.
I don't know what are the options for this problem. Both features seems to be required on this scenario, since it's envolving a lot of products. Any ideas/suggestion? The design is only my preference, but everything can change. The main goal is to improve user experience.