AJAX using PHP ...

As promised in my previous post, a little more on AJAX, using PHP to do the action. What I’ ll explain in this post: I’ ll type something in a text- field, and AJAX will search for possible answers in my database while I’ m typing. Compare it with the search- function in Facebook.

How do you start?
Create a basic HTML- page, with an inputfield and a div- container where your hints will be displayed. It should look like this:
<form name="testForm">
Zoekwaarde: <input type="text" onkeyup="doWork();" name="inputText" id="inputText" />
</form>

Hints: <div id="searchHints"></div>

Now we’ ll write our Javascript code. Javascript you say? Yes Javascript: AJAX, Asynchronious Javascript + XML. The function doWork() is going to get the text you type in the searchfield. Once you get the text, you have to “talk” to a php- page, which will send back its result. Next you’ ll need to catch the result and put it in the searchHints- div.

First doWork():
function getHTTPObject(){
        if (window.ActiveXObject) {
                return new ActiveXObject("Microsoft.XMLHTTP");
        } else if (window.XMLHttpRequest) {
                return new XMLHttpRequest();
        } else {
                alert("Your browser does not support AJAX.");
                return null;
        }
}

function doWork(){
        httpObject = getHTTPObject();
        if (httpObject != null) {
                httpObject.open("GET", "searchHints.php?inputText=" + document.getElementById(‘inputText’).value, true);
                httpObject.send(null);
                httpObject.onreadystatechange = setOutput;
        }
}

as you can see, the php- file which is going to do my work is called searchHints.php and will echo the answers. SearchHints.php knows what to search for by giving it a querystring with the info needed. In this case the inputText of the searchfield. This is how searchHints.php looks like:
// DVDModel contains the function which is going to return the info from my database
$dvdMod = new DVDModel;
      
if (isset($_GET[‘inputText’])) {
        $searchHints = $dvdMod->returnSearchHints($_GET[‘inputText’]);
              
        foreach($searchHints as $searchHint) {
                echo "<div class=’searchHint_item’>";
                echo "<a href=’film.php?url=$searchHint->IMDB_Link‘>";
                echo "<b>" . $_GET[‘inputText’] . "</b>";
                echo substr($searchHint->name, strlen($_GET[‘inputText’]), strlen($searchHint->name));
                echo "</a>";
                echo "</div>";
        }
}

OK, so this php- file echo’ s the results. We’ ll need to catch this when everything is ready to be published. Well, we declared it in our previous function doWork():
httpObject.onreadystatechange = setOutput;

So setOutput will be called when searchHints.php returned its results. setOutput has to display the info on our page:
function setOutput(){
        if(httpObject.readyState == 4){
                document.getElementById(’searchHints’).innerHTML = httpObject.responseText;
        }
}

Now use CSS to adjust the display. If you followed the steps correctly, it should work like the Facebook- search you probably use every day.

 Original Source:
http://blog.samvanfleteren.be/?p=451