asked on

javascript: highlighting div with arrow keys

Hello,

I have an input which, upon entry of letters, shows a div with input suggestions. Currently the suggestions get highlighted upon mouseover, and the input value becomes the suggestion value when clicking on the suggestion.
How can I have the suggestion be highlighted and populate the input through the user clicking the up and down arrows?

Here's my code:

<html>
<head>
<style type="text/css">
.suggmain
{
display:none;
width:489px;
background-color:White;
position:relative;
padding:1px;
z-index:99999;

border-color:#A0522D;
border-width:2px;
border-style:solid;
}
.suggclass
{
color:#A0522D;
font-size:15px;
font-weight:bold;
margin-top:10px;
}
.suggres
{
height:25px;
}

</style>
</head>
<body>
<div style="position:absolute;top:80px;width:495px;left:50%; margin-left:-246px;">
<div style="height:40px; background-color:white;width:491px;
border-style:solid; border-width:2px; border-color:#A0522D">
<input name="s" id="q" autocomplete="off" type="text" onkeyup="obj.pingSearch();" style="position:absolute;top:5px;width:400px;left:5px;height:30px;
font-size:x-large; font-weight:bold;color:#A0522D; border-color:white;border-style:none;border-width:0px" onkeypress="var k=event.keyCode||event.which;if(k==13){search()}" />
</div>

<div id="suggbox" class="suggmain" ></div>

</div>
<script type="text/javascript">

function blursugg()
{
document.getElementById('suggbox').style.display="none";
document.getElementById('suggbox').innerHTML="";
}

function sugghil(t)
{
t.style.backgroundColor="#FFE4B5";
}

function sugglol(t)
{
t.style.backgroundColor="#FFFFFF";
}

function choosesugg(t)
{
if(document.all){
var sugv=t.innerText;
} else{
var sugv=t.textContent;
}
document.getElementById("q").value=sugv;
document.getElementById('suggbox').style.display="none";
}

var google = {
ac: {
h: function(queryTerm) {
/* Do something with the queryTerm and/or the suggestions Array */
ln=queryTerm[1].length;
if (document.getElementById("q").value!==" "){document.getElementById('suggbox').style.display="block";}
else{document.getElementById('suggbox').style.display="none";}
document.getElementById('suggbox').innerHTML="";
var objr='<div class="suggclass">';
var suggItem='<div class="suggres" onmouseover="sugghil(this);" onmouseout="sugglol(this);" onclick="choosesugg(this);">{res}</div>'
for (var i = 0; i < ln; i++)
{
objr+=suggItem.replace('{res}',queryTerm[1][i][0]);

}
objr+='</div>';//alert(objr);
document.getElementById('suggbox').innerHTML += objr;
}
}
};

var obj =
{

pingSearch : function()
{

var queval=document.getElementById("q").value;
if (queval)
{
obj.s = document.createElement('script');
obj.s.type ='text/javascript';
obj.s.charset ='utf-8';
obj.s.src = 'http://suggestqueries.google.com/complete/search?hl=en&q=' + queval;
document.getElementsByTagName('head')[0].appendChild(obj.s);
}
}
};
</script>
</body>
</html>

mstrelan

ok this is a bit messy but it works

ASKER CERTIFIED SOLUTION

mstrelan

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Feivi99

ASKER

mstrelan,

I didn't think it was messy, I thought it was great :-) !

One more detail, though: can this be modified so that the user can keep his finger on the button to get through the results quicker? RIght now it only goes one by one.

Feivi99

ASKER

In addition, the "suggbox: is now not hiding when choosing a suggestion.

mstrelan

Key presses: What browser / operating system? In Firefox and Chrome on Ubuntu it is working fine for me. There is often a repeat delay set in keyboard properties in the operating system...

Suggbox not hiding: In the function choosesugg(t, hide) change the hide = false to hide = true

Feivi99

ASKER

mstrelan,

I realized the problem was that we were using "onkeyup", so obviously holding the button down wouldnt do anything. It's actually a little perplexing that Ubuntu IS allowing it to happen.

Anyway, I divided your code into two functions, with your code being called with a "onkeydown", and it's works great. Thanks!