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