Question

CONTROLLER

[HttpGet]
public JsonResult GetTags()
{
    var data = entity.Tags.Select(x => new { tagName = x.TagName });
    return Json(new { result = data }, JsonRequestBehavior.AllowGet);
}

SCRIPT

$(function () {
    function split(val) {
        return val.split(/,\s*/);
    }
    function extractLast(term) {
        return split(term).pop();
    }
    $("#tags")
// don't navigate away from the field on tab when selecting an item
.bind("keydown", function (event) {
    if (event.keyCode === $.ui.keyCode.TAB &&
    $(this).data("autocomplete").menu.active) {
    event.preventDefault();
        }
})
.autocomplete({
    source: function (request, response) {
    $.getJSON('@Url.Action("GetTags", "Question")', {
        term: extractLast(request.term)
}, response);
},
    search: function () {
        // custom minLength
    var term = extractLast(this.value);
    if (term.length < 2) {
        return false;
    }
    },
focus: function () {
    // prevent value inserted on focus
    return false;
    },
select: function (event, ui) {
    var terms = split(this.value);
    // remove the current input
    terms.pop();
    // add the selected item
    terms.push(ui.item.value);
    // add placeholder to get the comma-and-space at the end
    terms.push("");
    this.value = terms.join(", ");
    return false;
    }
});
});

In fact, Script are from default jquery-ui-autocomplete-with-multi-values

RAZOR

<div class="demo">
    <div class="ui-widget">
        @Html.TextBoxFor(x => x.Title, new { @class = "my_text_box", id = "tags" })
    </div>
</div>

Controller Action is triggered, But I can’t see any data in textbox. I debugged javascript, but function does not trigger. How can I fix it?

I can do auto-complete-with-multi-values with another way, not this way.

Answer 1

Your Action method is returning a collection of Objects, that would be structured like this;

[ { tagName: result1}, {tagName: result2} ... ]

Because you use the result directly for the autocomplete, the method needs to return data in one of the following two formats;

The data from local data, a url or a callback can come in two
variants:

An Array of Strings:
[ "Choice1", "Choice2" ]

An Array of Objects with
label and value properties:
[ { label: "Choice1", value: "value1" }, ... ]

Alternatively, you could take the results and map them appropriately to one of the above formats before posting them to the response method.