Help me plz, coding HTML/JS Form with multiple selections??

[coding_spartan]

hello guys!

I need help setting up a form, I want to do some pretty neat things:

It will say: What countries do you want to visit? [FIELD]

Part 1: I want that when a user starts typing into the field, it will suggest under things that match what you have typed so far, sort of like facebook search does. So I would need a list of recognized country names. Now for example imagine I was using this, and I typed in M, it would list under a max of 5 valid entries begining with M, if I typed in Me, it would list the ones begining with Me, if I typed in Mex, it would show Mexico. Now the user would have to click this drop down suggestion to choose it.
Part2: I want once a user clicks on a suggestion, it will "pop under" the input box or somewhere, with a "x" beside it to remove it. The user can now type in another country, and when it is clicked it too appears as a sort of "icon" under the input box or somewhere, with an "x" beside it. Clicking the x removes the country from the current list of countries. Once he is done, he goes on to other fields and the selected countries remain visible. Once a user submits the form, I want to get only the countries that were visible to him.

**An alternative idea, if this one is too complicated, would be to have a drop list with all countries in it, and once a person clicks one, it will remain and a "+" sign will appear under it. When pressed, another dropdown menu will appear so the person can choose another country from the second drop down, etc. OFC all selected countries can have an X to remove them. Idk how to do this either..

I need help guys I have no clue how to do something like this, where do you recommend I start? Any ideas? I tried searching but I'm not sure what to call this so I couldn't find anything in the search.

Thanks for your help so much!!

---------- Post added at 07:11 PM ---------- Previous post was at 05:36 PM ----------

What I am trying to do is simalar to Autocomplete-> http://jqueryui.com/demos/autocomplete/
What I am trying to do is pretty much the same, but when you click the text, i want it to "pop up" under, similar how tagging works on many sites like wordpress, etc. Any ideas how I can make those "floating tags" from the clicked ones, and add an X to remove them, and send their data when user hits "submit" on the form? *phew* :O

[Teensweb]

What I am trying to do is pretty much the same, but when you click the text, i want it to "pop up" under, similar how tagging works on many sites like wordpress, etc

What do you mean by "pop up" under? Can you provide more info about the difference between jquery autocomplete and "what you want" ?
And your "+ sign" idea is relatively easier to implement. To start with, you need a js onchange function. The function can write the + image which has a function attached to onclick- this one can write the next select and so on...
Try one of the following links to get some ideas to start with:
http://lovcombo.extjs.eu/
http://www.dhtmlx.com/docs/products/...bo/index.shtml
http://wilkerlucio.github.com/jquery-multiselect/
http://devthought.com/wp-content/pro...tboxlist/Demo/

[vv.bbcc19]

This site helps nicely for Html

http://tashian.com/htmlguide/form-codes.html

Just review it and postback.