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).


  1. Mike Dedmon
    Permalink to comment#

    I think there’s a video missing. This one starts out referring to you just showing us how to setup a search. The previous video was actually photoshop setup for the Snippets layout.

    • Chris Coyier
      Permalink to comment#

      Fixing now, thanks Mike.

      I’m going to bury this just because it’s a temporary issue.

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

We have a pretty good* newsletter.