I am building a tool which will be used on a regular basis by call center agents. The tool is concerned with supporting products - and as such each product has a product page which contains information, articles, news and other items of interest about that product.
The way a user currently navigates to a particular product is via a custom dropdown control with autocomplete - this control is displayed on every page and is shown below. 1) is the default state, 2) is as the user types text into the control. From that point the user can select a matching product using either the mouse or keyboard and selection will automatically take them to the product page. (Please note this is a prototype screengrab).
I am happy with this control, and have done 2 rounds of usability testing on the prototype. Users are comfortable with the control.
There is a second way however that a user can select a product, it is much less used (probably only 5% of the time) - the product can be located using a serial number. This is useful for when the customer does not know the make and model of their product.
So my question is this - what are some patterns I can follow to allow auto-selection of an object via two different input types? Here are some of the different ideas I have had:
Provide a second control with a prompt for serial number This is probably the simplest but seems a waste of real estate for something that is used so infrequently.
Allow the user to type a product name OR a serial number into the above control In this case the user would need to be trained, or conditioned to do this - it doesn't seem right as it is not intuitive.
provide an option for 'lookup by serial number' that launches a second control, or UI element This is where I am leaning right now, but does introduce extra clicks and complexity
Are there some examples of where this problem has been solved before? Am I missing some other options to solve this problem?