Ajax autocomplete question...

[admoore]

First, I am NOT terribly good with JavaScript, so please bear with me.

I have a form field I wish to autocomplete similar to Google Suggest. I have a php script querying an SQL database for matches to field input. I am basing my code on functions published in a reference guide.

Functions are as follows:

    <script type="text/javascript">        
        var xmlHttp;
        var completeDiv;
        var inputField;
        var nameTable;
        var nameTableBody;

        function createXMLHttpRequest() {
            if (window.ActiveXObject) {
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            else if (window.XMLHttpRequest) {
                xmlHttp = new XMLHttpRequest();                
            }
        }

        function initVars() {
            inputField = document.getElementById("names");            
            nameTable = document.getElementById("name_table");
            completeDiv = document.getElementById("popup");
            nameTableBody = document.getElementById("name_table_body");
        }

        function findNames() {
            initVars();
            if (inputField.value.length > 0) {
                createXMLHttpRequest();            
                var url = "get_custinfo.php?param=" + escape(inputField.value);                        
                xmlHttp.open("GET", url, true);
                xmlHttp.onreadystatechange = callback;
                xmlHttp.send(null);
            } else {
                clearNames();
            }
        }

        function callback() {
            if (xmlHttp.readyState == 4) {
                if (xmlHttp.status == 200) {
                    var name = xmlHttp.responseXML.getElementsByTagName("name")[0].firstChild.data;
                    setNames(xmlHttp.responseXML.getElementsByTagName("name"));
                } else if (xmlHttp.status == 204){
                    clearNames();
                }
            }
        }
        
        function setNames(the_names) {            
            clearNames();
            var size = the_names.length;
            setOffsets();

            var row, cell, txtNode;
            for (var i = 0; i < size; i++) {
                var nextNode = the_names[i].firstChild.data;
                row = document.createElement("tr");
                cell = document.createElement("td");
                
                cell.onmouseout = function() {this.className='mouseOver';};
                cell.onmouseover = function() {this.className='mouseOut';};
                cell.setAttribute("bgcolor", "#FFFAFA");
                cell.setAttribute("border", "0");
                cell.onclick = function() { populateName(this); } ;                             

                txtNode = document.createTextNode(nextNode);
                cell.appendChild(txtNode);
                row.appendChild(cell);
                nameTableBody.appendChild(row);
            }
        }

        function setOffsets() {
            var end = inputField.offsetWidth;
            var left = calculateOffsetLeft(inputField);
            var top = calculateOffsetTop(inputField) + inputField.offsetHeight;

            completeDiv.style.border = "black 1px solid";
            completeDiv.style.left = left + "px";
            completeDiv.style.top = top + "px";
            nameTable.style.width = end + "px";
        }
        
        function calculateOffsetLeft(field) {
          return calculateOffset(field, "offsetLeft");
        }

        function calculateOffsetTop(field) {
          return calculateOffset(field, "offsetTop");
        }

        function calculateOffset(field, attr) {
          var offset = 0;
          while(field) {
            offset += field[attr]; 
            field = field.offsetParent;
          }
          return offset;
        }

        function populateName(cell) {
            inputField.value = cell.firstChild.nodeValue;
            clearNames();
        }

        function clearNames() {
            var ind = nameTableBody.childNodes.length;
            for (var i = ind - 1; i >= 0 ; i--) {
                 nameTableBody.removeChild(nameTableBody.childNodes[i]);
            }
            completeDiv.style.border = "none";
        }

    </script>

My php query looks like this:

  $result = mysql_pconnect('localhost',$database_username, $database_password); 
  if (!$result) return false;
  if (!mysql_select_db($database_name)) return false;
  return $result;
}
$conn = db_connect(); // Connect to database
if ($conn) {
  $suggest = $_GET['param']; // The parameter passed to us

  $query = "select * from clients where name like '$suggest%' ";
  $result = mysql_query($query,$conn);
  $count = mysql_num_rows($result);
  if ($count > 0) {
    $name = mysql_result($result,0,'name');
                  }
	 }
	 
if (isset($name))  {
  // $return_value = $city . "," . $state; 
  $return_value = '<?xml version="1.0" standalone="yes"?><name>'.$name.'</name>';
}
else {  
  $return_value = "invalid".",".$_GET['param']; // Include for debugging purposes
}
header('Content-Type: text/xml'); 
echo $return_value; // This will become the response value for the XMLHttpRequest object

While I can successfully get a single result, I appear to be formatting my data wrong in the xml data sent back to the form- In order to see multiple matches I need to return some sort of array, I assume.

The provided example I am working from did not use php to query a database, rather it had sample data coded in a Java example file. Can anyone help by reviewing my code or pointing me towards a better example?

Any help would be greatly appreciated.

TIA,

-Allen

 

[BillyRayPreachersSon]

Consider using an external library that does this for you. For example,

http://script.aculo.us/

have something that works very nicely.

You can see demos here:

http://demo.script.aculo.us/ajax/autocompleter

and here:

http://demo.script.aculo.us/ajax/autocompleter_customized

This is achieved by including their libraries on the page, and adding 1 line of code after you input box.

Why re-invent the wheel when someone has written it for you already?

Hope this helps,
Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[admoore]

This site demonstrates exactly the behaviour that I want; however, from the examples given, I cannot divine how to interface this with my own data in a MySQL database. I have aquired the library, and the installed examples run OK, yet I haven't found what to edit to specify my own data. Sadly my skills are limited to primarily php.

TIA,

-Allen