How can I duplicate the CPSC search box?

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:

http://www.cpsc.gov/en/Search/?query=strollers&filters=all

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:

http://www.cpsc.gov/en/Search/?query=strollers&filters=recalls

There are three items of information we can glean from this: the page that produces search results is:

http://www.cpsc.gov/en/Search/

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:

What’s that look like? Let’s see:

Most importantly, give it a try. You’re safe, the addition of target=”_blank” ensures that the search results will pop up on a new page, not replace this one (a handy addition to forms of this nature that otherwise would take your visitor off to another site).

That’s it. It’s not glamorous or fancy, but I’ll let you dig into the HTML and add some CSS as desired to turn this mundane and austere search box into something more attractive for your site and consistent with your own design.

I will add one thing: If you wanted to duplicate the radio buttons alternating between “search all” and “just recalls”, you could do so with a pair of additional lines in the form that use the same value name, instead of the type=”hidden” hidden variable that we’re passing along:

<input type=”radio” name=”filter” value=”all”> all docs
<input type=”radio” name=”filter” value=”recalls”> just recalls

Not too trick. Of course, if you’re like me, you’ll now spend an hour fiddling with layout. But at least you know it all works!