#95: JavaScript for Multiple Google Custom Search Engines

(Updated on )

All of our Google Custom Search Engines are set up (we set up a different one for each section of the site). Our UI for search is ready to go. We have templates for each search results subpage ready to go. We just have one final step to get everything tied together: make the little “Search in: ” links work.

We’ve done so much prep here this is going to be pretty easy. All we need to do is change the action attribute on the form that houses our search form when you click different areas to search in. Easy cheezy jQuery stuff if I’ve ever seen it.

For each of the “Search in:” links, we’ll give it a data-url attribute. This attribute will hold the value that we intend to move to the action attribute of the form when the link is clicked. That’s exactly what we do in just a couple of lines of JS. We briefly discuss how the .attr() method can be both a “getter” and a “setter”, a common thing in jQuery.

We spend the rest of the time writing a little extra CSS and jQuery to set an “active” class on the links, so that when a user clicks “Forums” (or any of the others) they get feedback that that search limitation is currently active (turns white and underlined, like the default).