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

Question

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

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

那么让我们开始吧...

我的 MySQL 数据库中已有一个可变 [列表]，其中包含 [x] 首“歌曲”。示例:

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

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

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

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

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

然后将其附加到列表元素(div、span 等)，增加计数变量，如果等于 10，则不附加它并显示错误消息。

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

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

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

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

(或者，当您将其添加到显示列表时，您也可以将值粘贴在数组中，而不是稍后循环遍历该元素，这实际上会更好。无论如何，直到您将删除功能添加到临时列表，那么事情就会变得更加复杂。)

将数据发送到保存结果的 PHP 后端函数。

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

成功时显示成功消息。

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