Autosuggest tag-it jquery - how to get the ID AND Title on postback?

Question

I am using this autosuggest plugin: http://aehlke.github.com/tag-it/

I am getting an array of items from a database (right now just a plain Array). The list includes ID and Title. When I submit my form I would like to get both the ID and Title. Right now I only able to get Title. I want to get both values, so that new References (ID=0) can be created, and existing ones can just be inserted without any database lookup.

This is my code.

Codebehind for the book.aspx - 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();
    }
    ....

This is my current script:

<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>

And of course I have a textbox on the book.aspx page:

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

Any help is welcome. Thanks.

Answer 1

After looking at tag-it docs and sources, I'm afraid this plugin doesn't support anything other than simple strings as tags, so if you want to have more information sent back and forth you'll have to do it yourself. Assuming the Title attribute is unique (i.e. there are no two tags with the same Title but different IDs) it shouldn't be hard though...

The first thing you need is, on retrieval, map Title to ID somewhere:

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) { ... }
                }

Now you have many options. My suggestion would be using a hidden field, updated every time a tag is added or removed:

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
}

(Note: I suggested JSON, but you can use whatever format is more convenient for your server to handle)

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