Autosuggest tag-it jQuery - 如何在回传时获取ID和标题？

Question

我正在使用这个自动建议插件：http://aehlke.github.com/tag-it/ 我从数据库中获取了一个项目数组（现在只是一个简单的数组）。该列表包括ID和标题。当我提交表单时，我想同时获取ID和标题。目前我只能获取标题。我想要获取两个值，以便可以创建新的引用（ID=0），并且可以直接插入现有的引用而无需进行任何数据库查找。

以下是我的代码。

book.aspx的Codebehind - book.aspx.cs:

    ...

    protected void btnSave_Click(object sender, EventArgs e)
    {
        Response.Write(txtReferences.Text); // this contains Titles, but I would like both values.
    }

    public class Reference
    {
        public string Title;
        public int ID;
    }

    [WebMethod]
    public static Array GetReferences(string title)
    {
        // this will be replaced by lookup in database.
        List<Reference> References = new List<Reference>{
            new Reference{ID=1, Title="My ref 1"},
            new Reference{ID=2, Title="Ref ref 2"},
            new Reference{ID=3, Title="Blah ref 3"},
            new Reference{ID=0, Title=title} // for new tags set ID 0 to indicate that this should be created in db
        };

        return References.ToArray();
    }
    ....

这是我的当前脚本：

<script type="text/javascript">
$(document).ready(function () {
    var failure = function (result) {
        alert(result.status + " " + result.statusText);
    }

        var ref = $("#<%=txtReferences.ClientID %>");
    ref.tagit({
        allowSpaces: true,
        removeConfirmation: true,
        tagSource: function (title, showChoices) {
            var params = '{"title":"' + title.term + '"}';
            $.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                error: failure,
                url: "book.aspx/GetReferences",
                data: params,
                success: function (data) {
                    var assigned = ref.tagit("assignedTags");
                    var filtered = [];
                    for (var i = 0; i < data.d.length; i++) {
                        if ($.inArray(data.d[i].Title, assigned) == -1) { filtered.push(data.d[i].Title); }
                    }
                    showChoices(filtered);
                }
            });
        }
    });
});
</script>

当然，在book.aspx页面上有一个文本框：

<asp:TextBox ID="txtReferences" runat="server" />

欢迎任何帮助。谢谢。

- Sha

---

如果你在数据库中有这些标题，我认为你可以相应地获取ID！ - unloco

Answer 1

在查看 tag-it 文档 和 源代码 后，我恐怕这个插件不支持除简单字符串以外的其他标签，所以如果你想要发送和接收更多信息，你就需要自己处理。假设 Title 属性是唯一的（即没有两个具有相同 Title 但不同 ID 的标签），那么应该不难...

首先，你需要在检索时将 Title 映射到某个地方的 ID:

var ids = {}
...
                for (var i = 0; i < data.d.length; i++) {
                    ids[data.d[i].Title] = data.d[i].ID;
                    if ($.inArray(data.d[i].Title, assigned) == -1) { ... }
                }

现在你有很多选择。我的建议是使用一个隐藏字段，在每次添加或删除标签时更新它：

function updateHidden() {
    var chosenTags = $.map(ref.tagit("assignedTags"), function(tag) {
        return { Title:tag, ID:(ids[tag] || 0) }; // If the tag is new, use 0 as the ID
    });
    $("#<%=yourHiddenField.ClientID %>").val(JSON.stringify(chosenTags));
}
...
ref.tagit({
   ...
   onTagAdded:updateHidden,
   onTagRemoved:updateHidden
}

（注：我建议使用 JSON，但您可以使用您的服务器更方便处理的任何格式）

protected void btnSave_Click(object sender, EventArgs e)
{
    Response.Write(yourHiddenField.Text); // this contains both values, encoded in JSON format.
}

- mgibsonbr

---

@JustinHomes，你需要另一种方法来消除标签的歧义，例如当用户在输入框中键入“foo”时，如果有两个Title为“foo”的标签，系统应该选择哪一个？ - mgibsonbr