Cloning Google Suggest With Ajaxac
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.
<html> <head> <title>phpRiot Tutorial: GoogleSuggestClone</title> <link rel="StyleSheet" type="text/css" href="googlesuggestclone.css" /> </head> <body> <form method="get" id="f"> <input type="text" name="q" id="fq" /> <input type="submit" value="Search" id="fs" /> <div id="search-results"> <div class="sr"> <span class="srt">google</span> <span class="src">155,000,000 results</span> </div> <div class="srs"> <span class="srt">google.com</span> <span class="src">1 result</span> </div> </div> </form> </body> </html>
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.