/    Sign up×
Community /Pin to ProfileBookmark

using the arrow key in a div

Copy linkTweet thisAlerts:
May 18.2011

Hi all,

I have two divs. One of them contains an input field the other a list of suggestions. What I would like is the ability for the user to come down in the second div with the use of the arrow key an also scroll through the list of suggestions. This is how it looks:

<div id=”first”><input type=”text” /></div>

<div id=”second”>
<ul>
<li>suggestion</li>
<li>suggestion2</li>
<li>suggestion3</li>
</ul>
</div>

Thanks

to post a comment
JavaScript

7 Comments(s) ↴

Copy linkTweet thisAlerts:
@yomooreauthorMay 18.2011 — Hi, I found this script: jsfiddle

But I can't make it work because it uses class names and I'm using ID's instead.

Can someone please rewrite this for me so I can append ID'd.
Copy linkTweet thisAlerts:
@svidgenMay 18.2011 — What prevents you from [I]also[/I] using classnames?
Copy linkTweet thisAlerts:
@yomooreauthorMay 19.2011 — So after a dozen of updated and thank's to your enlightened? feedback I finally got it to work properly: jsfiddle

But now I'm facing another problem( actually this was the main problem from the start..) which is that I need to submit on enter( onkeypress??) when hovering the list, obviously it doesn't do that automatically.

Do you perhaps have any idea about how to do this? I won't stop you from writing the code? but if you don't feel like it I would appreciate if you could point me in the right direction.
Copy linkTweet thisAlerts:
@svidgenMay 19.2011 — Don't have time to really dig through your code. But, make sure you're keeping track of which list item is [I]currently[/I] highlighted in some globally accessible way (add the currently selected value as an attribute of the search box, for instance). Everywhere you need to update this value, do so: arrow up/down, etc. And make sure to [I]clear[/I] that value when the list is removed or hidden.

And then add another keyup condition to your searchbox. If an enter is received and there happens to be a highlighted value, fill the box with the highlighted value and call whatever method is necessary to update your results.

That help?
Copy linkTweet thisAlerts:
@yomooreauthorMay 19.2011 — Noop:-)

I´m no expert, you might as well talk polish to me. Anyway I was hoping it would be a small snippet of code, to bad.

I actually thought I would have to put the function which is assigned to the list of urls inside the previous function, the one I started with. So hovering the list would assign a different class and [I]also[/I] it would have the code to activate the list in the way it is now when clicked on an url of the suggestions list. I just dont now which function does that and how to put it inside the first code.
Copy linkTweet thisAlerts:
@svidgenMay 19.2011 — Ha! ... well, sorry to disappoint. Working on a deadline. And while I'm willing to take some small breaks for the forum, I sense I'd get drawn into this for a good long time if I started looking at your code.

If no one else can help, give this a bump on Monday and I may be able to take a deeper look.
Copy linkTweet thisAlerts:
@yomooreauthorMay 19.2011 — Thanks for your offer. Im working on it and I made a smal progress, but maybe till next time.
×

Success!

Help @yomoore spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.21,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...