Well everything working great, but, I want 1 thing. When the Suggestion box is visible, and has all the options, and If I mouse over them, it will show the hover effect. I want to achieve the same with keyboard. Like if I press down for the first time, the first option will be selected, and then if i press down again, it will select (hover) the next and so on, and similar is the case with up arrow key. Now, when i press enter, the selected option should go to the text box as if I click on a item.
Not “instead”… but it’s valid to have <p><a href=“somewhere”>Text</a></p>
If users without Javascript can’t make anything useful happen with those anchors, then I would have just the P to start and make Javascript create the anchors. Otherwise, if the anchors can take all users somewhere useful, you can have them sitting in the HTML in the first place.
Since it looks like they would only be there to be clickable, I’d have JS create them.
It has <p> in a <div> and for every <p> in that div, i have a css to make it hover.
Play, with every <p> i have an onclick fucntion to put the contnets of <p> on the textbox.
For this reason I do not put onclick events on unclickable items. I will always either have an anchor in there, or will make Javascript generate one.
So if I already had a <p> in my HTML, I’ll
create and anchor
append it as child of the p
set onclick function onto that anchor.
This means I can have css do :focus styles. :active will imitate :focus for IE6, otherwise it means “while clicking” (so long as either the finger is holding down the key or the mouse button). As soon as said finger lets up, :active is lost, although some browsers place a :focus on elements who have been clicked (FF, Opera, IE) while others don’t (Safari, Chrome).