Jquery, Autocomplete using json, id's vs display values

Question

I have kind of a complicated autocomplete issue. This is for a messaging system for a website I'm working on. I want it to work where you type in a user's name, it comes back with a thumb of their image and their name and their id. Then, when you select it, I want it to show the users name, but when it posts back I want it to send back their ID (as a user's name is not unique).

I started with http://blog.schuager.com/2008/09/jquery-autocomplete-json-apsnet-mvc.html as an approach. However, I am using the tageditor.js from Stackoverflow as my extender, just because I like how it works.

the tag editor is linked below. I think it's an older version.

We are using MVC 1.0. Here's my code:

public ActionResult Recipients(string prefix, int limit)
        {
            IList<UserProfile> profiles = profileRepository.GetUsers(prefix, limit);

            var result = from p in profiles
                         select new
                         {
                             p.ProfileId,
                             p.FullName,
                             ImageUrl = GetImageUrl(p)
                         };

            return Json(result);
        }

Here's the script on the page

<script type="text/javascript">
$(document).ready( function() {  
    $('#recipients').autocomplete('<%=Url.Action("Recipients", "Filter") %>', {      
        dataType: 'json',      
        parse: function(data) {
            var rows = new Array();          
            for(var i=0; i < data.length; i++) {
                rows[i] = { data: data[i], value: data[i].ProfileId, result: data[i].FullName };
            }          
            return rows;      
        },      
        formatItem: function(row, i, n) {
            return '<table><tr><td valign="top"><img src="' + row.ImageUrl + '" /></td><td valign="top">' + row.FullName + '</td></tr></table>';
        },      
        max: 20,
        highlightItem: true,
        multiple: true,
        multipleSeparator: ";",
        matchContains: true,
        scroll: true,
        scrollHeight: 300
     });
});
</script>

So, what happens is the call back works, my list shows the image and user name, and when I select one, it puts the user's full name in the text box with the delimter. However, when I submit the form, only the names are sent back and not the profile ids. Any ideas on how to get the ID's back without displaying them in the text box?

EDIT: Here's the version of tageditor.js I'm using http://www.gotroleplay.com/scripts/tageditor.js

Answer 1

I think you need a formatResult. That is what I use for what is sent back to the server. I think it would look something like:

formatResult(row, i, n) {
    return row.value;
}

if the "value: data[i].ProfileId" is what you want to send.

Answer 2

I know it's lame, but I always either (a) post the data from the result handler (NOT the formatResult, which, as I understand it, just formats the result for putting in the textbox, or (b) stick the value in a hidden field -- again from the result handler -- for posting.

    $('#recipients').autocomplete({options})
     .result(function(event, data, formatted) {
         $("#hidden_field").val( data.ProfileId );
// or just post the data from in here...
    });

or something. Please let us know if you find a better way...

Obviously, posting directly from the autocomplete 'result' is only appropriate in very specific scenarios