Estoy trabajando en una barra de búsqueda en el encabezado. La barra de búsqueda tiene 2 campos de entrada, y para buscar a través de los productos se requiere que se ingresen ambos valores (por ejemplo, el usuario está buscando una batería con 12 voltios y 10 amperios/h ).

El primer campo de entrada (voltios) tendrá un menú desplegable para los voltios que solo tendrá 4 valores diferentes para elegir. Estos valores ya están establecidos dentro de los metadatos y cuando el usuario hace clic dentro del campo de entrada, este menú desplegable aparecerá de inmediato con los 4 valores para elegir.

Sin embargo, el segundo campo de entrada (amp/h) tiene un menú desplegable con alrededor de 30 valores para elegir. Quiero que este menú desplegable esté oculto hasta que el usuario comience a escribir qué valor está buscando específicamente, luego el menú desplegable será visible con una cantidad reducida para elegir.

He codificado el primer campo de entrada (voltios), simplemente no sé cómo puedo hacer que el segundo sea como lo describí anteriormente. Tampoco estoy seguro de cómo hacer que busque realmente a través de los productos en función de los valores que el usuario inserta en el campo de entrada en función de lo que hace clic en los menús desplegables, pero esto se puede ordenar en una fecha posterior una vez que se ordena la funcionalidad.

¡Cualquier ayuda será apreciada!