Ajax auto complete

Ye' old general discussion board. Basically, for everything that isn't covered elsewhere. Come here to shoot the breeze, shoot your mouth off, or whatever suits your fancy.
This forum is not for asking programming related questions.

Moderator: General Moderators

Post Reply
User avatar
phpdevuk
Forum Contributor
Posts: 220
Joined: Mon Jul 04, 2005 5:31 am
Location: UK
Contact:

Ajax auto complete

Post 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?
Post Reply