Part 3: Custom Search Box

Steps for the Activity

1. Search Boxes

   This project is quite a bit more complex than the last- our script now isn't a whole lot longer, but our HTML is and the way those two interact is a whole new ball of wax, as they say. However, you are now up for such a challenge- so let's move onward!

   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 we'll use is quite similar to that we used for the dynamic links earlier. But this time we'll have to grab the user's input and save that in our term variable.

2. 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 specifies that we are asking for text and the name and id are used to manipulate the element with our JavaScript. One way we will use the id in our script is that we'll use it 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.
     
     [Note that there are two uses of the word 'value' in this context: 1) the value attribute is the user's input, 2) every attribute has a value (shown in red in my examples and always wrapped in quotation marks). So, confusingly, if a user types "Kitten photos" in the search box, the value attribute would have the value of "Kitten photos". It would look like this:

     value="Kitten photos"

     Confused? Don't overthink it- the terminology isn't so important. It will be more obvious when you start working with the code.]
   • 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.

3. JSBin

   So far, all of our exercises have been within Mozilla's Thimble application. Now we are going to move on to a more powerful and versatile application for this project- JSBin. JSBin is also an Open Source application and is free to use and share, but it has more functionality and is configured in a way that is more in keeping with advanced usage of HTML, CSS & JS. Let's talk a bit about the differences between JSBin and Thimble:

   • Panels: while Thimble only has two panels- the Editor and the Preview panels, JSBin has multiple panels. These panels 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: if you saved your work in Thimble, you know that once you make a save, the old version is automatically overwritten. However, 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. Alternatively, if you 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.

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