How to return a Json label / value pair from C # Controller Action for jQuery AutoComplete

Question

I need to create a jQuery Autocomplete text field that gets a list of names from the database, and when selected, sends the user to the appropriate link to the page.

I'm trying to do something like this post: Omit the controller action from jQuery autocomplete set

The solution makes sense, and click and redirection work, but I don't know how to return more than just a list of strings.

Current controller code (fragment):

List<string> Names = new List<string>(); foreach (Child c in listfromDB) { Names.Add(c.Name); //childNames.Add(new KeyValuePair<string, int>(c.Name, c.ID)); } return Json(Names); 

KeyValuePair does not seem to work. How do I create an array of objects?

My jQuery code:

 $(document).ready(function () { $("#find-child-box").autocomplete({ source: function (request, response) { // define a function to call your Action (assuming UserController) $.ajax({ url: '/Admin/AutoCompleteMyChildren', type: "POST", dataType: "json", // query will be the param used by your action method data: { query: request.term }, success: function (data) { response($.map(data, function (item) { return { label: item, value: item }; })) } }) }, minLength: 1, // require at least one character from the user select: function(event, ui) { alert('mom'); window.location.href = ui.item.value; } }); }); 

Answer 1

Actually, autocomplete works fine with a source that returns only an array of strings. This should work fine for you without changing the actions of your controller:

JavaScript:

 $(document).ready(function () { $("#find-child-box").autocomplete({ source: function (request, response) { // define a function to call your Action (assuming UserController) $.ajax({ url: '/Admin/AutoCompleteMyChildren', type: "POST", dataType: "json", // query will be the param used by your action method data: { query: request.term }, success: response }); }, minLength: 1, // require at least one character from the user select: function(event, ui) { alert(ui.item.ID); window.location.href = ui.item.value; } }); }); 

Check the jQueryUI auto-complete overview tab to see what data awaits widgets.

For your comment:

As prompted by @Alex, you will have to change the controller action data. You can create the correct array of objects using something like:

 return Json(listfromDB.Select(c => new { label = c.Name, ID = c.ID })); 

What should generate JSON that looks like this:

 [{ label: 'Scott', ID: '1234' }, ...] 

Which autocomplete can use correctly. Then at any time ui.item available inside autocomplete event handlers (e.g. select ), you must have access to ui.item.ID

Answer 2

Try creating a list that stores the child type.

 List<Child> children = new List<Child>(); foreach (Child c in listfromDB) { children.Add(c); } return Json(children); 

You will probably need an ot revist from the end of the code, as Json will be different.

If you do not want all the properties of the Child from the database, then create a custom class and add what you want.

 class CustomChild{ public string Name {get; set;} public int ID { get; set ;} } List<CustomChild> children = new List<CustomChild>(); foreach (Child c in listfromDB) { children.Add(new CustomChild{ Name = c.Name, ID = c.ID} ); } 

You may need a ton of syntax to make it work or add some links. I urge you to take a look at LINQ.