arrow keys used to highlight in autosuggest problem

[dmdickie]

hi

i am a newbie and am creating my own autosuggest as a way to learn ajax

i have an input text box. on input this fetches an xml file. any relevant suggestions from the xml file are then displayed in a div. you then use the arrow keys to highlight the suggestion you want in the div.

so i've managed this. but if i hold down the arrow keys, the highlight won't scroll .. i.e. the key won't repeat .. to be expected i realised with just keyup

tried keydown only which was fine only for opera

have now added two listeners to the input element .. keypress and keyup .. there are cross-browser problems

have played around all day today and I'm not sure I'm going about this the right way

any pointers would be well received

thanks
richard

[Fotiman]

I would use keypress only. The way mouse events work:

keydown,keypress[,keypress,...],keyup

You can have 1 or greater keypress events between a keydown and keyup event. What sort of problems are you having?

[dmdickie]

hi fotiman .. thanks once again for a quick response

keypress only .. works only in opera .. in ie && ff .. the arrow keys seem not to fire an event so no highlighting occurs

using keyup .. highlighting code works for all - ie,ff and opera .. but holding the arrow key means no repeat firing will occur, so this is no good for what i want.

thanks
richard

[Fotiman]

Ah, right. keypress, I think should work for Gecko based browsers (Firefox). For others, you should do something like this:

listen for the keydown event, but prevent the default key behavior (for the down arrow/up arrow keys). If the event handlers for those keys return false, then the keydown event will repeat when the key is held down (at least, I think it's something along those lines).

[dmdickie]

hi fotiman
keydown .. highlight repeating works for FF and IE .. but if typing letter, letter pressed comes after the key is released for keydown so my input text is always one letter behind .. i would imagine I can work round this, but opera does not behave .. will highlight one by one but not repeat on holding arrow keys ..

so that is why I was going in the direction of two listeners and maybe surpressing but this would involve browser sniffing and I wasn't sure if that was the way to go ..

keyup works for all .. no arrow repeat

keydown works for IE/FF with arrow repeating .. tho 1 letter delay .. opera highlight 1 by 1, but no repeat

keypress works for opera only ie repeat highlighting though 1 letter delay

so I'm thinking

keydown for ie and ff and keypress for opera with browser sniffing

what do you reckon?

thanks
richard







and keypress would allow repeat firing for arrow keys possibly - though maybe I need to do keyup and keydown instead and surpress depending on which browser ..

[Fotiman]

Been a while since I did something like this... :)

I think you do need multiple listeners. The keydown event can be used to catch certain special keys, like the enter key (to select a value from the results), and the up/down arrow keys, etc.. You would ignore all other keys at this listener and only use this for navigating the results. Cancelling the event here should cause the keydown event to be fired repeatedly (stopping the browser default for the key).

Then on keyup you could perform the lookup.

I've changed my argument slightly in that I don't think you'd want to do a lookup on the keypress event.

[dmdickie]

ok thanks fotiman .. i'll have more of a play and will update as to how I got on .. ta richard

[dmdickie]

hi all
well i got there in the end. but it might be the wrong technique but it works for me.

used all three key events: keydown, keypress, keyup

opera: keypress only
uniqueness: window.event + e.which == 0

safari: keydown only
uniqueness: window.event + e.which + e.charCode == 0

firefox: keyup, keydown
uniqueness: e.which + !window.event

IE: keyup, keydown
uniqueness: window.event + !e.which

this could break in some browsers I am sure, as I have only tested in safari 3, IE8, opera 11, firefox 3.

can anyone see drawbacks or faults to this?

PS a beginnners mistake for me was initially I was using alerts to test, thinking that the alert would fire one after the other for keydown, keypress then keyup .. but the alert will only fire once.
once i'd realised that, then I went about testing the uniqueness of each browser testing for each keydown, keypress n keyup separately.

all the best
dickie

[Fotiman]

Glad you got it working. Good exercise. :)

[dmdickie]

hobbling over the finishing line ;) .. thanks for your advice
dickie