Become Zend Certified

Prepare for the ZCE exam using our quizzes (web or iPad/iPhone). More info...

When you're ready get 7.5% off your exam voucher using voucher CJQNOV23 at the Zend Store

Cloning Google Suggest With Ajaxac

By Quentin Zervaas, 14 June 2005 Ajax CSS JavaScript PHP Download PDF (3 comments)

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

<?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>
        <?php if (strlen($q) > 0) { ?>
            <h3>
                Search submitted: <strong><?= htmlSpecialChars($q) ?></strong>
            </h3>
        <?php } ?>
        <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>

Next: Using The Application

Cloning Google Suggest With Ajaxac

Finalizing Our Files

In This Article