Dear Everyone,
I have a functional instant search (in draft at Click Here).
I want the search to function very similarly to Google. This will help sighted people figure it out, and bring me much more in compliance with accessibility standards. Unfortunately, I'm missing two "Google-oid" features:
.
1) How do I get the arrow keys to move the focus up and down?
In Google, up and down arrows allow you to move from inside the input box all the way down to the last choice (without recycling); I already have the enter keydown making the executive the link in focus. Right now on our site, moving up and down only works with the tab key (or worse, the Shift-tab). Ugh!
.
2) How do I make the search result of focus (e.g., alcoholism) either turn bright red or be more obvious?
In Google, there is an obvious color change as you move up and down the search results showing you where you are. In my code hovering over a choice (before clicking) makes the text turn red (nice!). However, if you use the shift key, the color change that occurs is way way too subtle. I tried adding a css onfocus and modified the active (just in case that might be mislabelled) -- no change.
.
Thanks so much!
Regards,
DrC
P.S. If you're using IE, you'll notice I'm working on code to make an input box "placeholder" work since IE doesn't support placeholder. It seems to work in Firefox and Chrome (Safari remains to be tested).
Here's the script (PHP is below):
<script type="text/javascript">
function showResult(str)
{
if (str.length==0)
{
document.getElementById("livesearch").innerHTML="";
document.getElementById("livesearch").style.border="0px"
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("livesearch").innerHTML=xmlhttp.responseText;
document.getElementById("livesearch").style.fontFamily="Arial";
}
}
xmlhttp.open("GET","livesearch.php?q="+str,true);
xmlhttp.send();
}
</script>
Here's the PHP:
<?php
$xmlDoc=new DOMDocument();
$xmlDoc->load("links.xml");
$x=$xmlDoc->getElementsByTagName('link');
//get the q parameter from URL
$q=$_GET["q"];
//lookup all links from the xml file if length of q>0
if (strlen($q)>0)
{
$hint="";
for($i=0; $i<($x->length); $i++)
{
$y=$x->item($i)->getElementsByTagName('title');
$z=$x->item($i)->getElementsByTagName('url');
if ($y->item(0)->nodeType==1)
{
//find a link matching the search text
if (stristr($y->item(0)->childNodes->item(0)->nodeValue,$q))
{
if ($hint=="")
{
$hint="<a href='" .
$z->item(0)->childNodes->item(0)->nodeValue .
"' target='_blank'>" .
$y->item(0)->childNodes->item(0)->nodeValue . "</a>";
}
else
{
$hint=$hint . "<br /><a href='" .
$z->item(0)->childNodes->item(0)->nodeValue .
"' target='_blank'>" .
$y->item(0)->childNodes->item(0)->nodeValue . "</a>";
}
}
}
}
}
// Set output to "no suggestion" if no hint were found
// or to the correct values
if ($hint=="")
{
$response="no suggestion";
}
else
{
$response=$hint;
}
//output the response
echo $response;
?>
---end of document ---
