Project Detail

Description

I'm having some Javascript difficulties with a site I'm building and would love some help.

This project shouldn't require any access to my existing files. You can just build a sample script and I can blend it into my existing code. Of course, I can show you what I've done, too.

The page will typically have three form text input boxes, one for city, state and country. I'm running AJAX code to offer up suggestions of existing database entries for this fields, which pop up in DIV's similar to the suggestions shown on many sites. The one I'm trying to emulate is Google. So, here's what I need.

A form with the three (3) INPUT type="text" boxes - city, state & country.

As you start to type in any of them, a DIV appears with suggestions in it.

Like Google, I'd like the suggestions DIV to appear as the same width as the "text" box that called for it, and I'd like that DIV to appear directly below that "text" box, just like the Google home page.

If you click on the suggestion, the "text" box populates with the clicked text from the suggestion DIV, and the suggestion DIV closes.

If you hit the "down arrow" key when the suggestions DIV appears, but the cursor still appears in the "text" box, focus moves to the first suggestion. Press "down arrow" key again, and the focus moves to the new suggestion, etc. (just like the Google home page) To select the suggestion currently in focus, hit the ENTER key (just like the CLICK process shown in the past paragraph), and the suggestion DIV closes and the selected text appears in the "text" box.

If you hit the "tab" key when the suggestions DIV appears, but the cursor still appears in the "text" box, the suggestions DIV will disappear and the focus shifts to the next "text" box. (moves from city to state, etc.)

This way, the user can "tab" between "text" inputs, but if a suggestion shown is desired, the user can down-arrow to the suggestion desired and hit ENTER to choose it.

If you click away from that "text" box or the related suggestions DIV, the suggestions DIV goes away.

I have the AJAX box checked as I'm creating this project, but really, it's an HTML & Javascript issue. I've already built the AJAX.

I'm assuming this should be a super easy project for your Javascript guru's!

Let me know!