I am working on a search bar in the header. The search bar has 2 input fields, and to search through the products requires both values to be inputted (eg user is looking for a battery with 12volts and 10 amp/h).

The first input field (volts) will have a dropdown for the volts which will only have 4 different values to choose from. These values are already set within the metadata and when the user clicks inside the input field this dropdown will show up straight away with the 4 values to choose from.

The second input field however (amp/h), has a dropdown with about 30 values to choose from. I want this dropdown to be hidden until the user begins to type which value they are specifically searching for, then the dropdown will be visible with a reduced amount to choose from.

I have coded the first input field (volts), i just don't know how i can get the second one to be the way I have described above. I also am unsure how to make it actually search through the products based on the values the user inserts into input field based on what they click from dropdowns, but this can be sorted at a later date once functionality is sorted.

Any help will be greatly appreciated!