Page 1 of 1

AJAX Programming

Posted: Wed Nov 29, 2006 9:24 pm
by php.newbie
Dear all,

I want to do something like answers.com.

When I type something into the text box on the top, there is a text selection area retrieved from database for us to select. I find it very usefull for user to search something and I really wish to implement it into my site.

I know it uses Ajax programming.

Anyone know exactly how they do it?

Any help is greated appreciated.

Thanks in advance.

Posted: Wed Nov 29, 2006 10:09 pm
by nickvd
Search google and these forums for "Ajax Autocomplete" There are lots of solutions for this problem...

Posted: Wed Nov 29, 2006 11:54 pm
by php.newbie
hi,

thanks for the tips.

will try to locate the right info.

Posted: Thu Nov 30, 2006 1:13 am
by php.newbie
hi there,

i have developed a simple autocompelete screen. and it's working.

however, the data array have to be preloaded into the page. anyway i can get the array on the fly without loading to the page?

Thanks in advance for any help.

Posted: Thu Nov 30, 2006 2:12 am
by Zoxive
index.php

Code: Select all

<!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=iso-8859-1" />
<title>Untitled Document</title>
</head>
<style>
#text{
	width:300px;
	height:200px;
	border:1px solid black;
}
</style>
<body>
<script language="javascript">
function getHTTPObject() {
  var req;
	if(window.XMLHttpRequest) {
		try {
			req = new XMLHttpRequest();
		} catch(e) {
			req = false;
		}
	} else if(window.ActiveXObject) {
		try {
			req = new ActiveXObject("Msxml2.XMLHTTP");
		} catch(e) {
			try {
				req = new ActiveXObject("Microsoft.XMLHTTP");
			} catch(e) {
				req = false;
			}
		}
	}
  return req;
}
var http = getHTTPObject();
function handleHttpResponse() {
	if (http.readyState == 4) {
		// Gets Results as a Javascript Array but spliting the data by commas
		var results = http.responseText.split(',');
		document.getElementById('text').innerHTML = results;
	}
}
//
function getdata(){
	var that = document.test.text.value;
	http.open("GET", 'http://www.zoxive.com/tests/search.php?search=' + that, true);
	http.onreadystatechange = handleHttpResponse;
	http.send(null);
}

</script>
<form name="test">
<input type="text" name="text" onkeyup="getdata();" />
</form>
<div id="text">

</div>
</body>
</html>
search.php

Code: Select all

<?php

if(isset($_GET['search'])){
	print $_GET['search'] . ',' . $_GET['search'] . ',' . $_GET['search'];
}else{
	print 'Error';
}

?>
I got bored...

Posted: Thu Nov 30, 2006 7:56 am
by php.newbie
Hi Zoxive,

Thanks so much for the sample code. I really appreciated it.

Will try it now.

Posted: Thu Nov 30, 2006 8:23 am
by php.newbie
Hi Zoxive,

I got an error on this line:
document.getElementById('text').innerHTML = results;

Did I miss out anything?

Posted: Thu Nov 30, 2006 1:14 pm
by Zoxive
I guess i should of tested it with Internet Explorer also :lol:

index.php

Code: Select all

<!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=iso-8859-1" />
<title>Untitled Document</title>
</head>
<style>
#textover{
	width:300px;
	height:200px;
	border:1px solid black;
}
</style>
<body>
<script language="javascript">
function getHTTPObject() {
  var req;
	if(window.XMLHttpRequest) {
		try {
			req = new XMLHttpRequest();
		} catch(e) {
			req = false;
		}
	} else if(window.ActiveXObject) {
		try {
			req = new ActiveXObject("Msxml2.XMLHTTP");
		} catch(e) {
			try {
				req = new ActiveXObject("Microsoft.XMLHTTP");
			} catch(e) {
				req = false;
			}
		}
	}
  return req;
}
var http = getHTTPObject();
function handleHttpResponse() {
	if (http.readyState == 4) {
		// Gets Results as a Javascript Array but spliting the data by commas
		var results = http.responseText.split(',');
		// Get Browser Info
		var browserName=navigator.appName; 
		 if (browserName=="Microsoft Internet Explorer"){
		 	textover.innerHTML = results;
		 }else{
		 	document.getElementById('textover').innerHTML = results;
		}
	}
}
//
function getdata(){
	var that = document.test.text.value;
	http.open("GET", 'http://www.zoxive.com/tests/search.php?search=' + that, true);
	http.onreadystatechange = handleHttpResponse;
	http.send(null);
}

</script>
<form name="test">
<input type="text" name="text" onkeyup="getdata();" />
</form>
<div id="textover">

</div>
</body>
</html>