Dropdown list

[tuga]

Hi there this is my first post, i'm new to javascript so please be patient.
Sorry for my english as i'm portuguese but i will try my best.

I've done a dropdown list with CSS, AJAX and PHP. The idea is that when the user types in something a list appears underneath the control so can help to fill in, a sort of when you type on the search of google you get a list of the words and number of results. Everything works fine but i want to use the arrow keys to navigate in the box and not only the mouse.

The problem is that the focus is on the control and not on this floating div, so i cannot figure out how to move the focus to this div and navigate with arrow(up and down) keys.
I don't know even if this is the right approach to build something like this, but i thought it was good.

Here is my code

<input type="text" name="txtCountry" id="Country"  onblur="validate('Country', this.value, event);" onkeyup="fill('Country', this.value, this);"/>

on key up the calls javascript and executes

document.write('<div id="pulldown" style="visibility:hidden; width:'+ size +'px" ></div>');

function fill(what, str, targ){
	var url = "scripts/signup/signup.php";
	fillwhat = what;
	action = 'fill';
	target = targ;
	url += "?id=" + what + "&action="+ action + "&str=" + str;
	xmlHttpOpen(url);
	
}

goes to PHP and retrieves the following response for example

<ul><li id="AD" onmouseover="fillCountry(this.innerHTML, this.id);" onblur="hidepulldown();" onclick="hidepulldown();">Andorra</li>
<li id="AE" onmouseover="fillCountry(this.innerHTML, this.id);" onblur="hidepulldown();" onclick="hidepulldown();">United Arab Emirates</li>
<li id="AF" onmouseover="fillCountry(this.innerHTML, this.id);" onblur="hidepulldown();" onclick="hidepulldown();">Afghanistan</li>
<li id="AG" onmouseover="fillCountry(this.innerHTML, this.id);" onblur="hidepulldown();" onclick="hidepulldown();">Antigua And Barbuda</li>
<li id="AI" onmouseover="fillCountry(this.innerHTML, this.id);" onblur="hidepulldown();" onclick="hidepulldown();">Anguilla</li>
</ul>

when i go with mouse over each item it fills the text box with the value, what i would like is to do the same with the arrow keys.

I've seen this effect here when you fill the field hometown http://www.wayn.com/waynsplash.html?wci=login i think its done with css.

Or any idea how to do this?


Thanks

[Nile]

I don't see anything under Hometown, do you mean just a simple:

<select>
<option>Hi</option>
<option>Hi</option>
<option>Hi</option>
<option>Hi</option>
</select>

[tuga]

You don't see anything because they use AJAX, create a div, position with css and put the information there, if you type at least 3 letters something comes up.

I found that the behaviors are done with key events so i will try, if i can do it i will put the code here.

Maybe this is a nice script for someone with better knowledge than me do it.

[Nile]

In mburts framework:
http://mikeburt.net/framework/
It looks like he has a function like that, see if you can contact him and get it to work.

[tuga]

thanks nile i actually found a solution here for everyone who is interested http://www.brandspankingnew.net/arch...uggest_v2.html

I'm not using since i've already written the code

Thanks
http://actualwebdesign.com
http://express-transfers.com