The US Government agency that manages product recalls, the Consumer Products Safety Commission, is a good one to help people know more about, so having a search box on your own page is a great idea. Most sites, however, would prefer if you just sent them the traffic with a link to their site, as I have in the previous sentence. That’s not so good for those of us who would like to hold on to the people that visit our site, and it’s a lot more elegant to embed a search box for another site onto your own than to keep pushing people to other sites rather willy-nilly!
Like any of these tasks, you can crack open the code to their home page and try to decipher things but it’s often easier to operate with the belief that their search system is a “black box” and that it’s your job as an HTML detective to reverse engineer what they have in place. Doing so requires some basic knowledge of HTML forms and how they work.
In this instance, if I go onto the CPSC site and search for “strollers”, here’s the URL of the resultant search results page:
This is when I choose “All pages & Documents” from the search box. If, instead, I search “Recalls & News Releases”, the resultant URL looks like this:
There are three items of information we can glean from this: the page that produces search results is:
The search term itself is sent as “query=pattern” and the way that the system differentiates between a site-wide search and a recalls and news releases only search is “filters=”, with the two possible values of “all” and “recalls”.
To simplify things, let’s just make any searches be of recalls only.
That means we need a form that lets the user specify the “query” variable and pushes the results to the URL specified.
This is done in HTML thusly:
Search CPSC: <input type=”text” name=”query”>
<input type=”hidden” name=”filter” value=”recalls”>
<input type=”submit” value=”search”>
What’s that look like? Let’s see: