Keyboard Navigation

[johnnyg24]

I am looking for a way to use the keyboard to navigate through a list of names created by an auto suggest script. When the user finds a name they are looking for they can click it with their mouse and it populates a text box. I would like to allow the user to use their up and down arrows to select a name from the list. I don't want to dynamically create a select box because I can't easily remove the vertical scroll bar. I have already tried displaying the auto suggest results in <a> tags and using focus(), but I can't simulate the css:hover effect. Any suggestions on how to do this or related articles I could read?Here is the script I am using to find out if the up or down arrow was pressed:

var listCnt = 0function showDown(evt) {	evt = (evt) ? evt : ((event) ? event : null);	if (evt) {		if(evt.keyCode == 40){			listCnt++		return true		}		if(evt.keyCode == 38){			listCnt--		return true		}else{			return false		}	}}

Here is the script trying to focus():

if(showDown(evt)==true){		var list = document.getElementById("matched").getElementsByTagName("a")		var goid = list[listCnt].id		document.getElementById(goid).focus()	}

[jeffman]

How does if(showDown(evt)==true){ get executed? Do you even know that it is being executed?Put some alert statements in the various clauses of your functions to see what's getting executed and when. Like this:

function showDown(evt) {	alert ("I'm in!");	evt = (evt) ? evt : ((event) ? event : null);	alert (evt);	if (evt) {		alert (evt.keyCode);		if(evt.keyCode == 40){			listCnt++		return true		}		if(evt.keyCode == 38){			listCnt--		return true		}else{			return false		}	}}if(showDown(evt)==true){		var list = document.getElementById("matched").getElementsByTagName("a")		var goid = list[listCnt].id		alert (goid);		alert (document.getElementById(goid));		document.getElementById(goid).focus()	}

[johnnyg24]

if(showDown(evt)==true) is being executed within the auto suggest function. Sorry I did not include it. The showDown(evt) function works properly and either decreases or increase listCnt based on if the up or down arrow was pressed. I have tested this and it works, however I can't figure out how to hightlight and select.

[jeffman]

I'm guessing you're testing in Explorer 6 or 7? A little research informs me that anchor_element.focus() does not on IE versions before IE8. I didn't know that before.

[johnnyg24]

You're right, IE doesn't support focus(), so I found an alternative method. And I test in FF and IE8.1) I set the className for the <a> that is being selected.2) Then I setAttribute('name', 'selected') of that <a>3) Whenever the enter key is pressed I look for document.getElementsByName('selected')[0].id and use that id to fill in a text box.However, document.getElementsByName('selected')[0].id returns null in IE? Any suggestions why?Here is all the code:

var listCnt = 0function showDown(evt) {	evt = (evt) ? evt : ((event) ? event : null);	if (evt) {		if(evt.keyCode == 13){			document.getElementById("custNum").value = document.getElementsByName('selected')[0].id			document.getElementById("matched").innerHTML = ""			document.getElementById("matched").className = "hide"		return false		}		if(evt.keyCode == 40){			listCnt++		return true		}		if(evt.keyCode == 38){			listCnt--		return true		}else{			listCnt = -1			return false		}	}}function whatKey(evt){	evt = (evt) ? evt : ((event) ? event : null);	if (evt) {		if(evt.keyCode == 13){			return false		}else{			return true		}	}}function tryThis(look,evt){	if(whatKey(evt) == true){	var minChar = 2	var show = 10	var cnt = 0	var div = document.getElementById("matched")	div.innerHTML = ""	if(look.length>=minChar){		div.className = ""		for(i=0;i<cust.length;i++){			var mat = ""			var found = ""			var left = ""			var right = ""			var entire = ""			var w = look			var str = cname[i].firstChild.nodeValue+" ("+cid[i].firstChild.nodeValue+")"			var patt = new RegExp(w,"gi")						if (patt.test(str)==true){				found = RegExp.input				if(str.match(patt).length>0){					mat = str.match(patt)				}				if(RegExp.leftContext.length>0){					left = RegExp.leftContext				}				if(RegExp.rightContext.length>0){					right = RegExp.rightContext				}				entire = left+"<span class='mat'>"+mat+"</span>"+right				cnt++				var tag = document.createElement('li')				tag.onclick = function(){addthis(this)}				tag.setAttribute('id', found)				tag.innerHTML = entire+"<br/>"				document.getElementById("matched").appendChild(tag)			}						if(cnt == show){				break			}		}	}	}	if(showDown(evt)==true){		highlight()	}}function highlight(){	var list = document.getElementById("matched").getElementsByTagName("li")	if(listCnt<0){			listCnt=0		}		if(listCnt>=list.length){			listCnt=list.length-1		}		var goid = list[listCnt].id		document.getElementById(goid).className = "high"		document.getElementById(goid).setAttribute('name', 'selected')}function addthis(id){	document.getElementById("custNum").value = id.id	document.getElementById("matched").innerHTML = ""	document.getElementById("matched").className = "hide"}