Part B: Custom Search Box

Steps for the Activity

1. Search Boxes

   We're all familiar with search boxes, especially this one:

   

   Francisco Tosete / Foter / CC BY-NC-SA

   But have you ever wondered how to create your own? Well, with query strings and HTML forms, we can do this fairly easily. The code is actually pretty straight-forward: we'll grab the user's input and save that in our queryString variable which we'll then manipulate into our URL. If this isn't making any sense- don't panic! Read on...

2. A mini guide to HTML and JavaScript

   We aren't going to get into too much detail for this exercise, but for you to fully understand what we're talking about, we'll need to discuss a couple of things:

   • HTML Element: HTML (HyperText Markup Language) is the coding language that web pages are built with. Think of it as the skeleton of a webpage- it provides the basic structure of the page and organization of the content. CSS (Cascading Style Sheets) is the language to style the HTML- kind of like the skin and clothes. In this Frankenstein-ian analogy JavaScript is therefore the muscle while the web developer and the user are both the brain.
     
     Each 'bone' in the skeleton of an HTML page is called an element- these are written out using opening and closing tags, enclosed in angle brackets, like so:

     <h3>This is a heading</h3>

     The <h3> element is a third level heading. The heading content begins after the <h3> tag, and ends with the closing tag, which has a backslash, like so: </h3>.
     
     We can also nest elements like so:

     <p>This is a paragraph with a <a>link</a> inside it</p>

     [The <p> tag is for a paragraph and the <a> tag is for a link.]
   • JS Variable: In computer programming, variables are similar to those used in Algebra- except that we can use variables to represent any type of data, not just numbers. A variable can be thought of as a shorthand- instead of having to type out "schipperke" a bunch of times and risk misspelling things, we can store the text inside of a variable, such as term like so:

     var term = "schipperke";

     [We type out var to signify that we are about to define a variable. Also, when we assign a value that is not a number, it needs to be inside quotation marks.]
     Now, if I were to write the following script:

     "Let's search for " + term + " photos in Flickr."

     The output would be:

     Let's search for schipperke photos in Flickr.

     The real beauty of variables is that we can change them later, like so:

     term = term + " puppy";

     And then our output would be:

     Let's search for schipperke puppy photos in Flickr.

   • jQuery selector: jQuery is a JS library that makes it easier for us to manipulate HTML & CSS. Simply put, jQuery gives us some shortcuts to work with our webpages. In order to target specific elements on a page, we will use jQuery selectors. Using jQuery to do this can be very complicated with most real-world webpages and I highly recommend taking the jQuery tutorial at Code School (try.jquery.com) if you want to learn more, but the basic idea is this:

     $('a').text("Schipperke");

     This line of code will insert the text "Schipperke" into every <a> element on the page. We accomplish this by using the a selector.
     Try it out >
     A more clever way to acheive this using our variable above would be:

     $('a').text(term);

     If we wanted to change the text in a paragraph, we could use a p selector to write:

     $('p').text('This is the new paragraph text.');

     [The dollar sign is a cue that we're using jQuery- whenever you use jQuery, you'll need to be sure to include that dollar sign!]
     Try it out >
   • jQuery id selector: Instead of simply targeting a type of element (which might affect all sorts of content on a page- sometimes we don't want to change every single paragraph, for instance), jQuery allows us to get much more specific. There are many ways to do this, but we are going to use the id selector. We can select an element based on its id like so:

     $('#textInput').val();

     The symbol for selecting the id is the #. Therefore, the script above is targeting the element with id= "textInput" and is then grabbing the value of that input. Simply put: that script is grabbing the text the user types into the search box.
     
     

3. HTML Forms

   For the purposes of this exercise, we'll have to talk a bit about HTML forms, but I'm going to keep it simple and stick to only those pieces we'll be using.

   • Text Input: every form has different ways for users to enter their own input (that's what a form is for, right?!). We are going to want our users to be able to type any text that they want, so we will be using a text input:

     <input type='text' name='searchTerm' id='searchTerm'>

     Notice that we have some attributes here- the type attribute specifies that we are asking for text and the name and id attributes are used to manipulate the element. In our script, we'll use the id to specifiy where we will grab the input value. The value of a text input field is what the user types in. We can insert a value by specifying that attribute and value pair if we want to have a suggestion already loaded in the field, but for now, we'll just leave it blank.
     
   • Submit button:The second type of input we are going to use is submit. Once the user has entered her search terms into the text box, she will need a way to signal that she is ready to search for those terms. By clicking on the submit button, our script will be run and her search will be under way.

4. JSBin

   Now we are going to move on to a great Open Source application for this project- JSBin. JSBin is configured in a way that is in keeping with real-world web development. Let's talk a bit about the the features of JSBin:

   • Panels: JSBin has multiple panels which can be hidden or displayed by clicking on the buttons at the top. Each panel is for a different language, plus the preview. For our purposes, that means three panels: HTML, JS & preview. This separation of panels is easier to see what we're doing and is more similar to practices used by most web developers, who use different files for each. Getting used to working with these separately is a good practice.
   • Versioning: In JSBin all of your versions are saved and numbered each time you choose to save. This can get confusing if you forget that you need to remember to get the URL of the most recent project. However, you can substitute the word 'latest' for the version number in the URL and you will be taken to the latest version.
   • All sorts of cool stuff: to be honest, I really like JSBin and it has all sorts of great features that we don't need to get into here, but if you are interested, check out their Features page.

5. Description of the Exercise

   This exercise is pretty straight-forward: you will be creating a search box to search for Creative Commons photos in Flickr. You will grab the value that the user inputs into the search box, convert that to your query string, insert it into a URL and then navigate to that URL in a new tab. Got it? Let's go!

   View the project  >