JavaScript Forum

**pealo86** · 12:43 PM

Im using a tutorial I have in a book to create an AJAX live search, but one of the main functions doesn't seem to be getting called!

It appears that the line:

Code:

ajaxCallback = displayResults;

Should run the function once it is assigned using the associated code in 'ajax.js', I think? Anyway, I think that's where the code is going wrong as the function 'displayResults ()' isn't being called. It's pretty hard to tell really since no errors show up in the error console.

Any help would be great!

ajax.jx:

Code:

// AJAX library

var ajaxreq = false, ajaxCallBack;

function ajaxRequest (filename)
    {
        try
            {
                ajaxreq = new XMLHttpRequest ();
            }
        
        catch (error)
            {
                try
                    {
                        ajaxreq = new ActiveXObject ("Microsoft.XMLHTTP");
                    }
                
                catch (error)
                    {
                        return false;
                    }
            }
            
        
        ajaxreq.open ("GET", filename);
        ajaxreq.onreadystatechange = ajaxResponse;
        ajaxreq.send (null);
    }

function ajaxResponse ()
    {
        if (ajaxreq.readyState != 4)
            {
                return;
            }
        
        
        if (ajaxreq.status == 200)
            {
                if (ajaxCallBack)
                    {
                        ajaxCallBack ();
                    }
            }
        
        else
            {
                alert ('Reqeust Failed: ' + ajaxreq.statusText);
            }
        
        return true;
    }

liveSearch.js:

Code:

// AJAX Live Search

//global time variable
var time;

// start timeout with each keypress
function startSearch ()
    {
        window.clearTimeout (time);
        time = window.setTimeout ('liveSearch()', 200);
    }

// perform the search
function liveSearch ()
    {
        // assemble PHP filename
        query = document.getElementById ('searchLive').value;
        filename = 'search.php?query=' + query;
        
        // displayResults will handle AJAX response
        ajaxCallback = displayResults;
        // send AJAX request
        ajaxRequest (filename);
    }

// display search results
function displayResults ()
    {
        // remove old list
        ul = document.getElementById ('list');
        div = document.getElementById ('results');
        div.removeChild (ul);
        
        // make a new list
        ul = document.createElement ('ul');
        ul.id = 'list';
        
        names = ajaxreq.responseXML.getElementsByTagName ('name');
        
        for (i = 0; i < names.length; i ++)
            {
                li = document.createElement ('li');
                name = names[i].firstChild.nodeValue;
                text = document.createTextNode (name);
                li.appendChild (text);
                ul.appendChild (li);
            }
        
        if (names.length == 0)
            {
                li = document.createElement ('li');
                li.appendChild (document.createTextNode ('No results'));
                ul.appendChild (li);
            }
        
        // display new list
        div.appendChild (ul);
    }

var input = document.getElementById ('searchLive');
input.onkeydown = startSearch;

liveSearch.htm:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>AJAX Live Search</title>
<script type="text/javascript" src="ajax.js"></script>
</head>



<body>
<h1>Ajax Live Search</h1>
<form id="frmSearch" name="frmSearch" method="post" action="">
  <p>Search for: 
    <input type="text" name="searchLive" id="searchLive" />
  </p>
  <div class="results">
    <ul id="results">
      <li>Results will display here</li>
    </ul>
  </div>
</form>

<script type="text/javascript" src="liveSearch.js"></script>

</body>
</html>