Search

See more about:

Where are we?

You know how to make a static Web site. You can make a site more useful by adding widgets.

This lesson’s goals

Search is one of the most important widgets. This lesson shows you how to add a simple search function to your site.

By the end of this lesson, you should:

  • Know why search makes your site more valuable.
  • Be able to create a search form on your site.
  • Be able to run Google searches from your site.

Why search matters

A good search function makes your site more valuable to visitors. Why?

It’s about benefit/cost ratio. Someone comes to your site with a question. Your content helps them answer the question. That’s a benefit.

But using your site has a cost: the time it takes to find the answer. If it takes a long time, the cost of finding the answer gets too high. People will go elsewhere.

A search function does not add content to your site. But it reduces the cost of finding the content that is already there. The result? Your site has a higher benefit/cost ratio. It’s more valuable to users.

But how do you add search?

Using Google’s search engine

Google already does a good job with search. So let’s borrow their search engine.

You know how to use Google. You go to http://google.com, and enter your search terms:

Google URL

Google homepage

Figure 1. Starting a Google search

When you click the Search button, your browser takes the URL of the search engine:

http://www.google.com/search

Then it adds the data you typed into the search field:

http://www.google.com/search?q=page+layout

Your format may vary. But you should see page+layout somewhere.

Your browser sends the entire string to the server at google.com. The server extracts the data “page layout”, runs the search, and shows you the results.

Google search URL

Google search result

Figure 2. Search result

It’s not quite that simple, but this is close enough for us to work with.

Try it yourself. Go to Google, type in some search terms, and run the search. Check out the URL of the results page. It won’t look exactly like the one I just gave you, but you’ll see the terms you typed embedded in the URL.

Renata
Renata

The user typed “page layout” into the text field. But when it was added to the URL, it was changed to page+layout. Why?

Kieran
Kieran

This is called URL encoding. Special characters like spaces, colons, etc., don’t work well in URLs. Your browser replaces the special characters, like making a space into +. When the google.com server gets the URL, it reverses the changes, converting page+layout back to “page layout”.

Searching on one site

You can restrict your Google search to a specific site, using the site parameter:

Google URL

Google homepage

Figure 3. Starting another Google search

The search engine will only search within the site you named. The results might be:

Another Google search URL

Another Google search result

Figure 4. Another search result

CC
CC

That’s URL encoding again?

Kieran
Kieran

Right. The user typed:

site:coredogs.com page layout

The browser used URL encoding, to make:

site%3Acoredogs.com+page+layout

The : became %3A. The entire URL was:

http://www.google.com/search?q=site%3Acoredogs.com+page+layout

Adding search to our site

Two steps.

  • Visitors type in search terms to a form on our site.
  • We send the search terms to Google, telling it to restrict the search to just our own site.

The form will look like this:

Our form

Figure 5. Our form

The user will type in some search terms:

Our form with search terms

Figure 6. Our form with search terms

When the visitor clicks the button, s/he gets the search results:

Another Google search URL

Another Google search result

Figure 4 (again). Another search result

Let’s do it piece by piece.

Creating the search form

This HTML will create the search form:

<h1>Search Demonstration</h1>
<div id="search_form">
  <input id="search_terms" type="text" size="20">
  <button id="search_button" title="Search this site">Search</button>
</div>

Figure 7. HTML for the search form

The <div> contains the entire form. It’s just an <input> field and a single <button>.

Here’s some CSS to style the form:

#search_form {
  background-color: #FBC766;
  padding: 10px;
  margin: 10px;
  float: left;
  border: 1px gray dotted;
}

Figure 8. CSS for the search form

If you wanted to put the form on the right of the page (in the header, say), you would change float: left; to float: right;. You can read about page layout with headers and such in another lesson.

Coding the search button

Now for the JavaScript code.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
  $(document).ready(function() {
    $("#search_terms").focus();
    $("#search_button").click(function() {
      var search_terms = $("#search_terms").val();
      if ( search_terms != "") {
        var google_url = "http://google.com/search?q="
          + "site:coredogs.com "
          + search_terms;
        window.location.href = google_url;
      }
    });
  });
</script>

Figure 9. JavaScript for the search form

As usual, we include the jQuery library (line 1). You can just copy-and-paste this line into your own page.

The code in the ready() event (lines 3 to 14) runs when the page has finished loading. It puts the keyboard cursor in the search field (line 4). You might not do this normally, but it’s convenient for testing the script.

Line 5 attaches code to the button’s click event. When the user clicks the Search button, the code in lines 6 to 11 runs.

Line 6 gets what the visitor typed into the text field, and puts it into a variable called search_terms.

Maybe the visitor clicked the Search button without typing anything. We don’t want to run the search, because there’s nothing to search for.

Line 7 takes care of that. Remember that != means “not equal to.” Two quotes together – "" – are an empty string. So, with:

if ( search_terms != "" ) {
...
}

the statements in the … will only run if search_terms has something in it.

Here are lines 8 to 10 again:

var google_url = "http://google.com/search?q="
   + "site:coredogs.com "
   + search_terms;

This makes the destination URL, and puts it into the variable google_url. We start with http://google.com/search?q=, then add the site name, and finally the search terms typed by the site visitor.

To search a different site, replace coredogs.com with another site name.

Here’s the next line (line 11):

window.location.href = google_url;

This tells the browser to go to URL in google_url. The browser will automatically URL encode google_url.

You can try it yourself.

W00f!

What we did works, but it loses the look of your site. Here’s what people see after using our search form:

Another Google search result

Part of Figure 4 (again). Another search result

Nothing like our site’s colors.

But there are other ways to add search to your site. You have two choices.

  • Use someone else’s search engine, like we did above.
  • Install your own search engine on your Web site.

Using someone else’s is easier. Googe Site Search is a paid service that can be used without Google branding. It shows search results on your site in your format.

To use your own search engine, you install a program on your server. You link your search form to it, so that the program runs when a user does a search.

You need to know how to install server-side programs to operate your own search engine. The ServerCore book is all about server-side programs. But if you want to see what’s out there, try HotScript’s PHP search engines page.

Exercise: YouTube searching

Make a page that will let people search YouTube. Here’s what mine looks like:

YouTube search form

Figure 1. YouTube search form

The user enters some text in the fields, and clicks the button. The results of a YouTube search appear.

For example, I entered Drupal in the field:

Drupal search

Figure 2. Drupal search

Here’s what I saw:

Drupal search results

Figure 3. Drupal search results

Upload your solution to your server, and enter the URL here.

(Log in to enter your solution to this exercise.)

Summary

Search is one of the most important widgets. This lesson showed you how to add a simple search function to your site. You learned:

  • Why search makes your site more valuable.
  • How to create a search form on your site.
  • How to run Google searches from your site.

What now?

We’ve just started our tour of widgets you can add to your site. Let’s look at some social widgets.


How to...

Lessons

User login

Log in problems? Try here


Dogs