The autosuggest tag is jquery - how to get id and title for postback?

Question

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

I get an array of elements from the database (now just a simple array). The list includes an identifier and a name. When I submit my form, I would like to get both an identifier and a name. Right now I can get a Title. I want to get both values ​​so that new links can be created (ID = 0), and existing ones can simply be inserted without searching the database.

This is my code.

Codebehind for 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 text box on the book.aspx page:

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

Any help is appreciated. Thanks.

Answer 1

Having looked at tag-it docs and sources , I'm afraid that this plugin does not support anything but simple lines, like tags, so if you want more information sent back and forth, you have to do it yourself. Assuming the Title attribute is unique (i.e. there are no two tags with the same Title but different ID s), this should not be difficult, though ...

The first thing you need is to find somewhere on the Title to ID map:

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

You now have many options. My suggestion would be to use 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 any format that is more convenient for your server)

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