Can anyone explain how to develop a search box and filter box similar to how Amazon.com’s new search box is styled? See the attachment to see an example of what I’m referring to. Basically in front of the search text box is a small filter option to search only within certain categories. If you click on the default option (All), an actual HTML select box appears just below the search box with all of your available options.
By looking at the HTML code, I’m assuming this works by creating a div/span with the default searching option displayed in plain text. An HTML select box is also included but hidden by default. When you hover or click the div/span, the select box is displayed. When an option is selected in the select box, the div/span text is changed to the selected value and the select box is hidden again. Is that the idea?
What would you call this? I’ve been searching Google to find samples of this and haven’t found any similar examples of this. I don’t really know what I should be searching for?
I had the same question. The usability of that method will be a lot nicer on mobile phones. So I looked around in Firebug, and they’re using a <select> element with opacity: 0; position: absolute; in the CSS. That select box is overlaid with some elements that have the appearance they wanted, and there’s a little bit of JavaScript to update the text when the select box changes. They took this approach because it’s not possible to show/hide a select box directly from JavaScript.