OpenWebSpider Suggest - How does it work?
OpenWebSpider Suggest uses the object XMLHttp to retrieve the most relevant
results for the current query if available in the table of the user-queries
while the user types it in the input box!
The table of the queries is like this:
query | results
... | ...
xyz | 10
abcde | 9
adgj | 13
... | ...
when a user types "a" OpenWebSpider Suggest ,with the object XMLHttp ,opens a
page that executes a PHP script that gets the queries beginning for "a" from the
table! translating to (my)SQL ->
"select query, results FROM querylist WHERE query LIKE 'a%' AND results>0 ORDER BY results DESC limit 5"
|
V
query | results
adgj | 13
abcde | 9
Let's see the code:
-------this creates the XMLHttp object------[
if(window.XMLHttpRequest)
{
try
{
xmlhttp = new XMLHttpRequest();
} catch(e)
{
xmlhttp = false;
}
}
else if(window.ActiveXObject)
{
try
{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch(e)
{
try
{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch(e)
{
xmlhttp = false;
}
}
}
]-------------
------this executes the PHP-script-------[
xmlhttp.open("GET", "script.php?query="+document.form.input_box.value,true);
]-------------
------this variable contains the list of the results-------[
xmlhttp.responseText;
]-------------
script.php executes the sql-query and generates a list of results!
The main page gets the list and puts it in a <div>
-------------[
div=document.getElementById("my_hidden_div");
div.style.display = "";
div.innerHTML=xmlhttp.responseText;
]-------------
EXAMPLE ( ajax_test-test1.php )
------test1.php-------[
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<script
language=javascript>
var xmlhttp=false;
function test()
{
if(window.XMLHttpRequest)
{
try
{
xmlhttp = new XMLHttpRequest();
} catch(e)
{
xmlhttp = false;
}
}
else if(window.ActiveXObject)
{
try
{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch(e)
{
try
{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch(e)
{
xmlhttp = false;
}
}
}
if(xmlhttp)
{
xmlhttp.open("GET", "test2.php?test="+document.frm.input_box.value,true);
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4)
{
div=document.getElementById("my_div");
div.style.display = "";
div.innerHTML=xmlhttp.responseText;
}
}
xmlhttp.send(null)
}
}
function displaynone()
{
div=document.getElementById("my_div");
div.style.display = "none";
}
</script>
<body>
<form name="frm" method="get" action="#">
<input autocomplete="off" name="input_box" type="text" value="shen139" onBlur="javascript:displaynone();" onKeyUp="javascript:test();return false;">
<input name="submit" type="submit" value="test">
</form>
<div id="my_div" style="display:none; position:absolute; background-color:#E7E6FF; padding: 0px; border-style:solid; border-width:medium; border-color:#3338FF;"> div </div>
<p>Shen139 Lab<br>
shen139 (at) openwebspider [dot] org<br>
</p>
</body>
</html>
]-------------
------test2.php-------[
<?
echo "Test is<br>".$_GET["test"];
?>
]-------------
Shen139 Lab
