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

Discussion in 'Web Design, HTML And CSS' started by coding_spartan, May 20, 2011.

  1. coding_spartan

    coding_spartan New Member

    Joined:
    May 20, 2011
    Messages:
    2
    Likes Received:
    0
    Trophy Points:
    0
    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!! :)
     
  2. coding_spartan

    coding_spartan New Member

    Joined:
    May 20, 2011
    Messages:
    2
    Likes Received:
    0
    Trophy Points:
    0
    What I am trying to do is simalar to Autocomplete-> [http]jqueryui[dot]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
     

Share This Page

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice