hello all,

I have a little problem that i hope can be solved.

senerio....

You start to type in an <input> field and a list of results show based on what you type, I have a list of Airports in MySQL that is check for LIKE of what is typed in and the matches show that can be selected. But you can only scroll with the mouse and not the arrow keys.

Does anyone know how I may allow arrow keys as well as the mouse to select their choice?

    Googling for javascript key event took me to this page and after reading their code and one of the comments, I proceeded to make some changes. The commented added some code to check for alt, shift and/or ctrl. But apart from having some flaws that would need fixing (checking previous state of alt/ctrl/shift at the beginning of keyup function, and then comparing this to the value of the current state towards the end, and taking no action if either of them change (to produce no output when ctrl is pressed, then released, or when first ctrl + u is pressed, u is released then when ctrl is released take no action.

    I'm not entirely certain, but I believe modern browsers all implement booleans event.shiftKey, event.altKey, event.ctrlKey for key events, which makes this check easier. The code below is tested in FF 3.6 and IE8, but you should ofc test it in any browser you want to support.

    function KeyCheck(e)
{
	// IE iirc
	if (window.event)
	{
		var evt = window.event;
	}
	// others iirc.
	else
	{
		var evt = e;
	}
	/* Remember that this is 65 for both 'A' and 'a',
	    51 for both '3' and (for my keyboard layout) #
	var keyID = evt.keyCode;
	// For displaying ArrowUp etc
	var keyStr = '';
	switch(keyID)
	{
		// shift
		case 16:
			return;
		// ctrl
		case 17:
			return;
		// alt
		case 18:
			return;
		case 19:
			keyStr = "Pause";
			break;
		case 37:
			keyStr = "Arrow Left";
			break;
		case 38:
			keyStr = "Arrow Up";
			break;
		case 39:
			keyStr = "Arrow Right";
			break;
		case 40:
			keyStr = "Arrow Down";
			break;
		case 46:
			keyStr = 'Delete';
			break;
	}
	var s = '';
	s += (evt.ctrlKey) ? 'Ctrl + ' : '';
	s += (evt.altKey) ? 'Alt + ' : '';
	s += (evt.shiftKey) ? 'Shift + ' : '';
	if (keyStr)
	{
		s += keyStr;
	}
	else
	{
		s += keyID;
	}
	document.getElementById('key').value = s;

    You can obviously remove anything that doesn't involve arrow keys. But you still might wish to implement topOfList() for Ctrl+ArrowUp, bottomOfList() for Ctrl+ArrowDown, and in a similar fashion listPageUp() for Shfit+ArrowUp.

    Edit: you obivouslsy need to register this event handler in an appropriate place as well. For example, doing this on document (to listen for key events no matter which element has focus

    document.onkeyup = KeyCheck;

    But you'd be better off doing this for your input element.

      Write a Reply...