I have found this little bit of code vary useful and I thought I would give it to you all.
The basic idea here is that as an individual types something in an <input> text field the java script runs another php file with every keystroke and yields a result in a <div> somewhere on the page.
Its not as complicated as one might think.
This example will show you how to search an array of fruit but you can use this to display anything you want and run any php code you want. I often times use this to do LDAP and MySQL queries on the fly.
This is the javascript for the keypress feature. This needs to be on the same page as the <input> your typing into, I generally add it in the <head> section of my pages as a <script> but I am sure it would work as a separate file.
<script type="text/javascript">
function showHint(str)
{
if (str.length==0)
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","search.php?search="+str,true); //this is the name of the file you are loading to actually run the search and the field you are passing to that file in this case search.php?search="some sting"
xmlhttp.send();
}
</script>
This is the actual code for the <input> field and display area. field you want to use. Notice there is no submit button, that is because every thing happens when you type not when you hit submit so it is not needed.
<form method="get" action="<?php $_SERVER["PHP_SELF"] ?>">
<center>Search:<br/><input type="text" onkeyup="showHint(this.value)" name="search" /></center>
</form>
<div id="txtHint"></div>
The issue with this code is if someone hits return to submit the form you end up right back at a blank page. So.. a little e if then statement and problem resolved.
<?php
if (!$_REQUEST){ // if there is nothing in the parameter fields on the URL do this.
?>
<form method="get" action="<?php $_SERVER["PHP_SELF"] ?>">
<center>Search:<br/><input type="text" onkeyup="showHint(this.value)" name="search" /></center>
</form>
<div id="txtHint"></div>
<?php
} else { // if there is something in the parameter fields do this.
?>
<script type="text/javascript">
window.onLoad = showHint('<?php echo $_REQUEST["search"] ?>');
</script>
<form method="get" action="<?php $_SERVER["PHP_SELF"] ?>">
<center>Search:<br/><input type="text" onkeyup="showHint(this.value)" name="search" value="<?php echo $_REQUEST["search"]; ?>" /></center>
</form>
<div id="txtHint"></div>
<?php
}
?>Now on our second file we actually preform the search of our array.
<?php
$fruit = array("apple","orange","grape","tomato","cherry","watermelon"); // this is our array
foreach ($fruit as $key => $value) { // this does just what it says it does.. for every value in the array take the key and out put the value as a variable $value
$pos = strpos($value, $_REQUEST['search']); // This searches every value in the array for a series of letters that matches what you typed
if ($pos === false) { // if no results exists do nothing
} else {
echo $value."<br/>";
}
}
?>and there you have it an array searched on the fly by the letters in the individual words in the array.
Here are the two files completed.
index.php:
<script type="text/javascript">
function showHint(str)
{
if (str.length==0)
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","search.php?search="+str,true);
xmlhttp.send();
}
</script>
<?php
if (!$_REQUEST){ // if there is nothing in the parameter fields on the URL do this.
?>
<form method="get" action="<?php $_SERVER["PHP_SELF"] ?>">
<center>Search:<br/><input type="text" onkeyup="showHint(this.value)" name="search" /></center>
</form>
<div id="txtHint"></div>
<?php
} else { // if there is something in the parameter fields do this.
?>
<script type="text/javascript">
window.onLoad = showHint('<?php echo $_REQUEST["search"] ?>');
</script>
<form method="get" action="<?php $_SERVER["PHP_SELF"] ?>">
<center>Search:<br/><input type="text" onkeyup="showHint(this.value)" name="search" value="<?php echo $_REQUEST["search"]; ?>" /></center>
</form>
<div id="txtHint"></div>
<?php
}
?>search.php:
<?php
$fruit = array("apple","orange","grape","tomato","cherry","watermelon");
foreach ($fruit as $key => $value) {
$pos = strpos($value, $_REQUEST['search']);
if ($pos === false) {
} else {
echo $value."<br/>";
}
}
?>
