Creating The Html Search Interface

The first thing we need to do is create the HTML for the seach form. This really just consists of a form, with a text input box and a submit button. We’re also going to create the DIV that will serve as our dropdown box to hold the dynamically fetched search results.

After this we will style the page.

This code goes into index.php.

Listing 1 listing-1.html

google
155,000,000 results

google.com
1 result

We give each of the elements an ID, as we will need to reference them later — ‘f’ is for form, ‘fq’ for form query, and ‘fs’ for form submit.

Also, we created two sample search results that we can use for styling. The DIV to hold these results is search-results, a non-selected item is class sr (“search result”), and a selected item is class srs (“search result selected”).

We will alter this later to remove those sample search terms.