Related Books

Learning PHP, MySQL, and JavaScript: A Step-By-Step Guide to Creating Dynamic Websites (Animal Guide)

By Robin Nixon

If you know HTML, this guide will have you building interactive websites quickly. You'll learn...

The Essential Guide to Dreamweaver CS4 with CSS, Ajax, and PHP (Essentials)

By David Powers

Dreamweaver CS4 is a massive step forward in terms of integration with the rest of the CS4 suite...

Cloning Google Suggest With Ajaxac

By Quentin Zervaas, 14 June 2005, Ajax, CSS, JavaScript, PHP (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

Learning PHP, MySQL, and JavaScript: A Step-By-Step Guide to Creating Dynamic Websites (Animal Guide)

The Essential Guide to Dreamweaver CS4 with CSS, Ajax, and PHP (Essentials)

Cloning Google Suggest With Ajaxac

Finalizing Our Files

In This Article