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

Comments

  1. User Avatar
    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.

    • User Avatar
      Chris Coyier
      Permalink to comment#

      Fixing now, thanks Mike.

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

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

Submit a Comment

icon-closeicon-emailicon-linkicon-menuicon-searchicon-tag