Cloning Google Suggest With Ajaxac
Finalizing Our Files
Well we’ve come a long way, but hopefully you remember earlier we said we needed to make a few changes to index.php and googlesuggestclone.css.
Basically we need to make the search-results div hidden by default, and to remove the sample elements we created so we could style the page.
The stylesheet googlesuggestclone.css now looks like this:
Listing 18 listing-18.css
form { margin : 0; } input { vertical-align : middle; } #fq { width : 300px; font-family : Arial, sans-serif; font-size : 13px; padding-left : 4px; } #search-results { width : 306px; border : 1px solid #000; margin-top : -1px; float : left; display : none; } * html div#search-results { width : 307px; } /* box model hack */ .sr, .srs { width : 100%; float : left; font-family : Arial, sans-serif; font-size : 13px; padding : 1px 0 0 0; } .sr { background-color : #fff; color : #000; } .srs { background-color : #36c; color : #fff; cursor : pointer; } .sr .src { color : #008000; } .srs .src { color : #fff; } .srt { float : left; font-size : 13px; margin-left : 4px; } .src { float : right; font-size : 10px; margin-right : 3px; padding-top : 2px; } form { margin : 0; } input { vertical-align : middle; } #fq { width : 300px; font-family : Arial, sans-serif; font-size : 13px; }
The only different is the display : none property in #search-results.
And now, the index.php. We are also going to make one small improvement at this point, and that is to make some output if the search form is submitted, just so we know that it was submitted and the selected term was submitted properly.
Listing 19 listing-19.php
require_once('GoogleSuggestCloneJax.class.php'); $ajax = new GoogleSuggestCloneJax(); $ajax->handleRequest(); $q = isset($_GET['q']) ? $_GET['q'] : ''; <html> <head> <title>phpRiot Tutorial: GoogleSuggestClone</title> $ajax->loadJsCore(true) </head> <body> if (strlen($q) > 0) { <h3> Search submitted: <strong> htmlSpecialChars($q) </strong> </h3> } <form method="get" id="f"> <input type="text" name="q" id="fq" /> <input type="submit" value="Search" id="fs" /> <div id="search-results"></div> </form> $ajax->attachWidgets(array('query' => 'fq', 'results' => 'search-results')) $ajax->loadJsApp(true) </body> </html>


