AJAX Programming

PHP programming forum. Ask questions or help people concerning PHP code. Don't understand a function? Need help implementing a class? Don't understand a class? Here is where to ask. Remember to do your homework!

Moderator: General Moderators

Post Reply
php.newbie
Forum Newbie
Posts: 16
Joined: Wed Sep 20, 2006 3:28 am

AJAX Programming

Post 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.
nickvd
DevNet Resident
Posts: 1027
Joined: Thu Mar 10, 2005 5:27 pm
Location: Southern Ontario
Contact:

Post by nickvd »

Search google and these forums for "Ajax Autocomplete" There are lots of solutions for this problem...
php.newbie
Forum Newbie
Posts: 16
Joined: Wed Sep 20, 2006 3:28 am

Post by php.newbie »

hi,

thanks for the tips.

will try to locate the right info.
php.newbie
Forum Newbie
Posts: 16
Joined: Wed Sep 20, 2006 3:28 am

Post 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.
User avatar
Zoxive
Forum Regular
Posts: 974
Joined: Fri Apr 01, 2005 4:37 pm
Location: Bay City, Michigan

Post 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...
php.newbie
Forum Newbie
Posts: 16
Joined: Wed Sep 20, 2006 3:28 am

Post by php.newbie »

Hi Zoxive,

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

Will try it now.
php.newbie
Forum Newbie
Posts: 16
Joined: Wed Sep 20, 2006 3:28 am

Post by php.newbie »

Hi Zoxive,

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

Did I miss out anything?
User avatar
Zoxive
Forum Regular
Posts: 974
Joined: Fri Apr 01, 2005 4:37 pm
Location: Bay City, Michigan

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