Page 1 of 1

Ajax auto complete

Posted: Fri Nov 25, 2005 4:40 am
by phpdevuk
Dabbled with my first bit of ajax today, working on a registration system where I want a text field to auto complete. doesn't work in IE yet.

requesting page

Code: Select all

<script language="JavaScript" type="text/JavaScript">

function complete() {
	var names = Array();

    var url = "getcategories.php?id=" + escape(document.autocomplete.id.value);
    initRequest(url);
    req.onreadystatechange = processRequest;
    req.open("GET", url, true);
    req.send(null);
}

function processRequest() {
    if (req.readyState == 4) {
        if (req.status == 200) {
          parseMessages();
        } else {
            clearNames();
        }
    }
}

function parseMessages() {
    clearNames();
    var categories = req.responseXML.getElementsByTagName("categories")[0];
    if (categories.childNodes.length > 0) {
        var autorow = document.getElementById("menu-popup");
        autorow.style.visibility = "visible";  
    }
    for (loop = 0; loop < categories.childNodes.length; loop++) {
        var category = categories.childNodes[loop];
        var name = categories.getElementsByTagName("category")[0];
        appendCategory(name.childNodes[0].nodeValue);
    }
	
	displayCategories();
	
}

function displayCategories(){

	for(i=0;i<=ArrayLen;i++){

		document.autocomplete.suggestions.options[i] = new Option(names[i],names[i]);
	
	}

}

function appendCategory(name){

	ArrayLen = names.push(name);

}

function clearNames(){

	names = Array();

}

function initRequest(url) {    

	if (window.XMLHttpRequest) { 
	
		req = new XMLHttpRequest();  
		 
	} 
	else if (window.ActiveXObject) {

	isIE = true;    
	req = new ActiveXObject("Microsoft.XMLHTTP");  
	
	}
	
}

</script>

....

<form action="test.php" method="POST" name="autocomplete">
 <input type="text" size="20"  id="complete-field" name="id" onkeyup="complete();">
 <select name="suggestions" id="menu-popup">
 <option></option>
 </select>
</form>

getcategories.php

Code: Select all

<?
header('Content-Type: text/xml'); 

function array_to_xml($array, $level=1) {
        $xml = '';
    if ($level==1) {
        $xml .= '<?xml version="1.0" encoding="ISO-8859-1"?>'.
                "\n<array>\n<categories>\n";
    }
    foreach ($array as $key=>$value) {
        $key = strtolower($key);
        if (is_array($value)) {
            $multi_tags = false;
            foreach($value as $key2=>$value2) {
                if (is_array($value2)) {
                    $xml .= str_repeat("\t",$level)."<$key>\n";
                    $xml .= array_to_xml($value2, $level+1);
                    $xml .= str_repeat("\t",$level)."</$key>\n";
                    $multi_tags = true;
                } else {
                    if (trim($value2)!='') {
                        if (htmlspecialchars($value2)!=$value2) {
                            $xml .= str_repeat("\t",$level).
                                    "<$key><![CDATA[$value2]]>".
                                    "</$key>\n";
                        } else {
                            $xml .= str_repeat("\t",$level).
                                    "<$key>$value2</$key>\n";
                        }
                    }
                    $multi_tags = true;
                }
            }
            if (!$multi_tags and count($value)>0) {
                $xml .= str_repeat("\t",$level)."<$key>\n";
                $xml .= array_to_xml($value, $level+1);
                $xml .= str_repeat("\t",$level)."</$key>\n";
            }
        } else {
            if (trim($value)!='') {
                if (htmlspecialchars($value)!=$value) {
                    $xml .= str_repeat("\t",$level)."<$key>".
                            "<![CDATA[$value]]></$key>\n";
                } else {
                    $xml .= str_repeat("\t",$level).
                            "<$key>$value</$key>\n";
                }
            }
        }
    }
    if ($level==1) {
		$xml .= "</categories>\n";
        $xml .= "</array>\n";
    }
    return $xml;
}


if(!isset($_GET['id'])){

	$id="te";
	
}
else{

$id = $_GET['id'];

}

$row = array();

// setup database details

mysql_connect("localhost", "user", "password");
						
mysql_select_db("db");

$sql = "SELECT category FROM skillsCategories WHERE category LIKE '".$id."%'";

$result = mysql_query($sql);

if(mysql_num_rows($result)>0){
	
	while($rs = mysql_fetch_row($result)){
	
		$row['category'][] = $rs[0];
	
	}
	
}

$xml = array_to_xml($row);

echo $xml;

?>
any ideas for improving it, or any comments?