jQuery simple auto add item form

I am looking to create a very simple jQuery "auto complete form" that will allow an individual to "add" up to 10 of their favorite songs based off a strict list, and have their "top 10" list be submitted to a database. It should end up being all jQuery fancy like.

Question: What's an easy way to "add" result rows to the page with jQuery? Maybe append?

So let's get started...

I have a variable [list] of [x] number of "songs" already in a MySQL database. Example:

songID  | SongName
   1    | Song Title 1
   2    | Song Title 2
   3    | Song Title 3
  ...   | ...etc...
  100   | Song Title 100

Next, I have a user Song Table that will store the top 10 songs they have picked.

songID  | userID
  2     |   1
  3     |   1
 ...    |  ...
  1     |   8
  8     |   8
 ... etc.

Finally, I have a User table (no need to display that here, it's very simple)

So whats I needs to do?

This first version will be very simple, no fancy do-hickeys and what-nots.

1. To Add Song: Type song into "auto complete" field based off MySQL songlist.
2. Select song, then add it to their "top 10" list
3. Limit adding 10 songs, limit song list to database list
4. After adding 10 songs, the user presses submit and it gets posted to the database.
5. All done!

Screen开发者_如何学Goshot example below http://www.ppleasysavings.com/images/Untitled-1.jpg

I have a basic javascript+php based script I am developing, but over the course of making this "better", with recommendations posted, I will update my script.

Bind an event handler function to the add button click event.

http://api.jquery.com/click/

Get the currently selected value from the drop down select box.

http://api.jquery.com/val/

Then append it to the list element (div, span, whatever), increment a count variable, if it equals 10, don't append it and show an error message.

http://api.jquery.com/append/

Bind an event handler function to the save button click event.

Loop through each item in the list element building an array of the list items and values needed for storage. You could also check here that they have at least 10 items selected.

http://api.jquery.com/jQuery.each/

(Alternately, when you are adding it to the display list, you could also stick the values in an array rather than looping over the element later, that would actually be better. Until you add remove functionality to the temporary list anyways, then it gets more complicated.)

Post the data to a php backend function which saves the result.

http://api.jquery.com/jQuery.post/

On success display success message.

http://api.jquery.com/html/

You can user jQueryUI Autocomplete.

You can set a callback for select event, which will add hidden input to the form like this:

<input type="hidden" name="to_song_id[]" value="__SELECTED_ITEM__.id" />

and update the html of the song list wrapper.