Asp.Net Mvc JQuery autocomplete with multiple values?

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.

Matt Tew · Accepted Answer · 2012-09-01 03:26:23Z

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.

answered Sep 1, 2012 at 3:26

Matt Tew

1,6311 gold badge10 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

AliRıza Adıyahşi Over a year ago

when I wrote :(x => new { label = x.TagName, value = x.TagId }) It still does not work.

AliRıza Adıyahşi Over a year ago

sorry it works. But the problem is its position. my textbox is downstream of the page. But auto complete datas are shown above the page. Any idea aout this?

Collectives™ on Stack Overflow

Asp.Net Mvc JQuery autocomplete with multiple values?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related