0

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

2
Contributors
1
Reply
3
Views
4 Years
Discussion Span
Last Post by Airshow
0

A couple of points to help you get an answer :

  • The question is 100% client-side. People need to to see the served HTML, not the PHP souce that generates it.
  • I can't see that Java is relevant and expect you mean "Javascript".

Edited by Airshow: typo

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.