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;
    }
});
});

事实上，脚本来自默认jquery-ui-autocomplete-with-multi-values

剃刀

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

触发控制器操作，但我在文本框中看不到任何数据。我调试了javascript，但函数没有触发。我该如何解决？

我可以用另一种方式做auto-complete-with-multi-values，而不是这种方式。

Answer 1

你的Action方法正在返回一个对象集合，其结构如下;

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

由于您直接将结果用于自动填充，因此该方法需要在following two formats之一中返回数据;

来自本地数据，网址或回调的数据可以分为两部分   变体：

一串字符串：
      [ "Choice1", "Choice2" ]

带有的对象数组   标签和价值属性：
  [ { label: "Choice1", value: "value1" }, ... ]

或者，在将结果发布到响应方法之前，您可以获取结果并将它们适当地映射到上述格式之一。

Asp.Net Mvc JQuery自动完成多个值？

1 个答案: