jQuery - Use key/value pair in autocomplete

Question

In my ASP MVC view, I am passing a key/value pair back from the controller. After looking at fiddler and viewing in Chrome's debugger I can see that the information is being passed back correctly.

I would like for the value of the key/value pair to be the item that is displayed in the autocomplete list. When the user selects an item from the list, I would like that item's key to be placed into the text box.

Here is the jQuery code from my view

$(function () {
    $('#DRMCompanyId').autocomplete({
        source: '@Url.Action("compSearch", "AgentTransmission")',
        minLength: 2,
        select: function (event, ui) {
            $('#DRMCompanyId').val(ui.item.label);
        }
    });
});

One thing I noticed - if I add the ui variable to the watch list in the browser's debugger I notice that the label and the value are the exact same. Again, however, I'm seeing that what's being returned is the complete key/value pair.

Here is a screen shot of the Network/Response console after the search is complete. Some of the data is private so I blacked it out however you can see there is a key/value pair being returned.

Guacin

Answer 1

You'll need to make the AJAX request yourself and transform the data to the format that jQueryUI expects:

$(function () {
    $('#DRMCompanyId').autocomplete({
        source: function (request, response) {
           $.ajax({
               url: '@Url.Action("compSearch", "AgentTransmission")',
               type: 'GET',
               dataType: 'json',
               data: request,
               success: function (data) {
                   response($.map(data, function (value, key) { 
                        return {
                            label: value,
                            value: key
                        };
                   }));
               }
           });
        },
        minLength: 2
    });
});

Also, the value property of an autocomplete item is automatically placed in the input when that item is selected, so there should be no need for a custom select handler.

Example: http://jsfiddle.net/Aa5nK/60/

Nonplus

Is there a way to attach data-attributes to the generated lis? – Habitude

Answer 2

Same from above, bit elaborated

Front End

<input id="CompanySearch" type="text" />

<script>
    $(function () {
        $("#CompanySearch").autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: '@Url.Action("GetCompanyAutoComplete", "Admin")',
                    dataType: "json",
                    data: { term: request.term },
                    success: function (data) {
                        response(data);
                    }
                });
            },
            minLength: 2
        });
    });
</script>

C#

public JsonResult GetCompanyAutoComplete(string term)
{
    var search = term.Trim();

    var itemList = (from items in db.TblProductSuggestionFirsts where items.Name.StartsWith(search) select new { label = items.Name, value = items.Name }).Take(50).ToList();

    return Json(itemList, JsonRequestBehavior.AllowGet);

}

Json result format

Avouch