»  Home  »  Web Technologies  »  3 Practical Uses For AJAX
 »  Home  »  Web Design  »  3 Practical Uses For AJAX
 »  Home  »  Programming  »  3 Practical Uses For AJAX
3 Practical Uses For AJAX
By Mitchell Harper | Published 01/31/2006 | Web Technologies , Web Design , Programming | Rating: ratingfullratingfullratingfullratingfullratingempty Unrated |
AJAX Use #3: Search Results

My final AJAX example will show how to retrieve a list of search results from the server. After seeing Google Suggest in action I thought it would be a good idea to do something similar.

To start, let's create our PHP script that will return the search results. Because I want to keep things simple, we'll just create a basic array and use a simple algorithm. Add this code to a new file and call it search.php:

<?php

    $results = array();
    $links = "";

    $results["http://www.cats.com"] = array("cat", "cats", "kitten", "kittens", "pet", "pets");
    $results["http://www.google.com"] = array("search", "search engine", "google");
    $results["http://www.mtv.com"] = array("music", "tv", "music charts");

    if(isset($_POST["query"]))
    {
        $q = strtolower($_POST["query"]);
        $arrQueries = explode(" ", $q);

        foreach($arrQueries as $query)
        {
            foreach($results as $link=>$keywords)
            {
                foreach($keywords as $word)
                {
                    if(strtolower($word) == $query)
                    {
                        if(!is_numeric(strpos($links, $link)))
                            $links .= sprintf("%s,", $link);
                    }
                }
            }
        }

        echo $links;
    }

?>

I've created a dummy array of search links and keywords, and depending on what words are typed into a text box, the corresponding search links will be returned. More on this in a minute.

Let's create our HTML file. Call it search.html and copy the HTML below into it:

<html>
    <head>
        <style>

            .box
            {
                border: solid 1px black;
                width: 200px;
                height: 80px;
                background-color: lightyellow;
                padding: 10px;
                margin-top: 5px;
                display: none;
            }

        </style>
        <script>

            var url = "search.php";
            var what = "ShowResults(req.responseText)";

            function GetResults(Query)
            {
                DoCallback("query="+Query);
            }

            function ShowResults(Links)
            {
                var results = document.getElementById("results");

                if(Links != "")
                {
                    results.style.display = "block";
                    results.innerHTML = "";
                    arrLinks = Links.split(",");

                    for(i = 0; i < arrLinks.length; i++)
                    {
                        if(arrLinks[i] != "")
                            results.innerHTML = results.innerHTML + "<a href='"+arrLinks[i]+"'>"+arrLinks[i]+"</a><br>";
                    }

                }
                else
                {
                    results.style.display = "none";
                }
            }

        </script>
        <script src="ajax.js" type="text/javascript"></script>
    </head>
    <body>
        Search: <input id="query" type="text" onKeyUp="GetResults(document.getElementById('query').value)">
        <div id="results" class="box">

        </div>
    </body>
</html>

The most important part of our HTML code is the search box, which looks like this:

Search: <input id="query" type="text" onKeyUp="GetResults(document.getElementById('query').value)">

When something is typed in the box, its onKeyUp event is fired, which calls the GetResults JavaScript function:

function GetResults(Query)
{
    DoCallback("query="+Query);
}

Whatever was typed into the text box is passed back to our search.php script that we created earlier. The search query is split up by spaces, and each word is checked against the pre-defined list of dummy search results:

$results["http://www.cats.com"] = array("cat", "cats", "kitten", "kittens", "pet", "pets");
$results["http://www.google.com"] = array("search", "search engine", "google");
$results["http://www.mtv.com"] = array("music", "tv", "music charts");

If the search query contains any of the words in brackets, the link for that search term is sent back to the browser. Once all search results are checked, the links are output to form a nice little search results box -- all in real time.
Pages: « Back  1 2 3 4 5  Next » 
Next: Conclusion »

Spread The Word

Web designers: Learn how to attract more clients and profit like the big guys. Subscribe to our newsletter.