Autosuggestion box - up/down arroe behaviour

[stationX]

Hi all,
I'm creating an autosuggestion input box.
The only thing left I need to do is to implement the up/down arrow functionality (when the user presses the down arrow key it starts to cycle through the suggestion list).

My autosuggestion list is populated using a seperate DIV for each suggestion returned.
What I am stuck on is how to identify and select the various suggestions on each onUpArrow or onDownArrow (or what ever they called!) event.

How do I make it think that one of these rows is in a mouse over state using the arrow keys instead of the mouse?
thats the bit I can't fathom.
Can anyone help?

Thanks
BN

 

[BabyJeffy]

To get the ball rolling, it will be useful to see what you have done so far.

Cheers,
Jeff

[tt]Visit my blog [!]@[/!]

http://www.coderambler.com/

Visit Code Couch [!]@[/!]

http://www.codecouch.com/

[/tt]

Make sure your web page and css validates properly against the doctype you have chosen - before you attempt to debug a problem!

FAQ216-6094

 

[stationX]

Thanks for your reply,

The AJAX side of things is adapted from the code at w3schools.
The XMLHttpRequest object calls a PHP script that queries the database and returns the results as echoed HTML - each search result in it own div holder, as follows:
-------------------------------------------------------
while ($results = mysql_fetch_array($sqlGetCompany))
{
$escapedResult = $results[0];

$output=$output."<div onMouseOver=\"this.className='over'\" onMouseOut=\"this.className='notover'\" onclick=\"fill('$escapedResult')\">$results[0]</div>";

}
//send back generated output
echo($output);

----------------------------------------------------------

This HTML is bound to a holding DIV that is the actual suggestion box that pops open as the user types.
Then the fill function actually populates that input box as follows:

-------------------------------------------
function fill(thisValue) {
document.getElementById("inputString").value = thisValue;
document.getElementById("suggestions").style.visibility="hidden";

document.getElementById("inputString").focus();
}

--------------------------------------------------

ANy ideas?
I can't see how to addres the individual DIVs as I have no unique names for them.
I'm wondering if I could pass some kind of structure back to Javascript from PHP but is that overkill?

Thanks
BN

 

[stationX]

I think I can sort it all out burt there is one thing stopping me and that is handling the pressing of the down and up keys.

at the moment I've got these two lines

window.onkeydown=getComps;
document.onkeydown = getComps;

and the function that handles it:

function getComps(e)
{
---
---
}

It works fine but I only want it to fire on onkeydowns in the field that the auto suggestion is operating, not the whole document.

I tried removing the first two lines I mentioned above and added ...onkeydown("getComps(e);")... to the INPUT html but it doesn't work.
Can anyone help?

 

[BillyRayPreachersSon]

Have you tried assigning the onkeydown event to the element in question using JS instead of in HTML (so the same as the two lines in the post above, but not on 'document' and 'window')?

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/