JQuery autocomplete using json, id and display values

Question

I have a difficult autocomplete problem. This is for the messaging system for the website I'm working on. I want it to work where you enter the username, it returns with the thumb of their image and their name and their identifier. Then, when you select it, I want it to display the username, but when it is sent back, I want it to send its identifier back (since the username is not unique).

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

The tag editor is linked below. I think this is an older version.

We are using MVC 1.0. Here is 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 is 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, the callback works, the image and username are displayed on my list, and when I select it, it puts the full username in the delimited text box. However, when I submit the form, only the names are sent back, not the profile identifiers. Any ideas on how to return the identifier without displaying them in the text box?

EDIT: Here is the version of tageditor.js I am using http://www.gotroleplay.com/scripts/tageditor.js

Answer 1

I know that it is lame, but I always either (a) place data from the result handler (NOT formatResult, which, as I understand it, simply formats the result to enter a text field or (b) stick to the value in a hidden field - again from the result handler - for publication.

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

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

Obviously, publishing directly from an autocomplete result is only suitable in very specific scenarios.

Answer 2

I think you need the Result format. This is what I use to send to the server. I think it will look something like this:

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

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

Answer 3

This answer comes almost a year ago, but I tested it, and it works great .

After repeatedly searching and looking at this question in SO, I finally found a better solution to display the values, but sent the identifiers.

Step by step instructions

1. Get the “latest” version of the jQuery Jörn autocomplete plugin from the GitHub repository (the official version is integrated into the jQuery UI, but some developers still support and update the “standalone”) here: jQuery AutoComplete Plugin (GitHub repository)

2- Use a JS array like this (you can also use the AJAX method):

 var categories = [ { name: "Lawyer", id: "1" }, { name: "Driver", id: "2" }, { name: "Dentist", id: "3" }, ]; 

3 Use this JavaScript function to run the plugin:

 $("#category").autocomplete(categories, { formatItem: function(row, i, max) { return row.name; }, formatMatch: function(row, i, max) { return row.name; }, formatResult: function(row) { return row.name; } }); $("#category").result(function(event, data, formatted) { $("#category_id").val(data["id"]); }); 

4- Add another hidden field to your form:

 <input type="text" id="category" /> <input type="hidden" id="category_id" name="category_id" value="" /> 

PS: you can use the jQuery user interface autocomplete widget as it is based on Jörn one but did not test it.