jQuery简单的自动添加项目表单

Question

我希望创建一个非常简单的jQuery“自动完成表单”，这将允许个人根据严格的列表“添加”他们最喜欢的10首歌曲，并拥有他们的“前10名“列表提交到数据库。它应该最终成为所有jQuery的幻想。

问题：使用jQuery将结果行“添加”到页面的简单方法是什么？也许追加？

让我们开始......

我在MySQL数据库中已经有[x]个“歌曲”的变量[list]。例如：

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

接下来，我有一个用户歌曲表，它将存储他们选择的前10首歌曲。

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

最后，我有一个 用户表 （这里不需要显示，非常简单）

那么我需要做什么？

第一个版本将非常简单，没有花哨的做什么和什么不是。

1. 添加歌曲：根据MySQL歌曲列表将歌曲输入“自动完成”字段。
2. 选择歌曲，然后将其添加到“前10名”列表
3. 限制添加10首歌曲，将歌曲列表限制为数据库列表
4. 添加10首歌曲后，用户按下提交并将其发布到数据库。
5. 全部完成！

下面的屏幕截图示例 http://www.ppleasysavings.com/images/Untitled-1.jpg

我正在开发一个基本的基于javascript + php的脚本，但在使这个“更好”的过程中，通过发布推荐，我将更新我的脚本。

Answer 1

将事件处理函数绑定到添加按钮单击事件。

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

从下拉选择框中获取当前选定的值。

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

然后将它附加到list元素（div，span，等等），递增一个count变量，如果它等于10，则不附加它并显示错误信息。

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

将事件处理函数绑定到保存按钮单击事件。

循环遍历list元素中的每个项目，构建存储所需的列表项和值的数组。您还可以在此处查看他们至少选择了10个项目。

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

（或者，当你将它添加到显示列表时，你也可以将值粘贴在数组中而不是稍后在元素上循环，这实际上会更好。直到你将删除功能添加到临时列表中，然后它变得更复杂。）

将数据发布到保存结果的php后端函数。

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

成功显示成功消息。

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

Answer 2

您可以使用jQueryUI Autocomplete。

您可以为select事件设置回调，这将为表单添加隐藏的输入，如下所示：

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

并更新歌曲列表包装的html。