Related Books

The Essential Guide to Dreamweaver CS3 with CSS, Ajax, and PHP

By David Powers

With over 3 million users worldwide, Adobe's Dreamweaver is the most popular web development...

AJAX and PHP: Building Responsive Web Applications

By Cristian Darie, Bogdan Brinzarea, Filip Chereches-Tosa, Mihai Bucica

Building Responsive Web Applications with AJAX and PHP is the most practical and efficient...

Cloning Google Suggest With Ajaxac

By Quentin Zervaas, 14 June 2005, Ajax, CSS, JavaScript, PHP (1 comment)

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

The Essential Guide to Dreamweaver CS3 with CSS, Ajax, and PHP

AJAX and PHP: Building Responsive Web Applications

Cloning Google Suggest With Ajaxac

Finalizing Our Files

In This Article