Question

我试图在我的mvc项目中自动完成多个值，但它自动完成第一个值，第二个没有发生任何事情我的观点代码：

@Html.TextBox("SentUsers", "", new { @class = "text-box"})
@Html.Hidden("UsersId")

java脚本代码：

<script type="text/javascript">
var customData = null;
var userId;
$(function () {
    $("#SentUsers")
        .bind("keydown", function (event) {
            if (event.keyCode === $.ui.keyCode.TAB &&
            $(this).data("ui-autocomplete").menu.active) {
                event.preventDefault();
            }
        })
        .autocomplete({
            minLength: 2,
            source: function (request, response) {
                $.ajax({
                    url: "/Ajax/AutoCompleteUsers",
                    type: "POST",
                    dataType: "json",
                    data: { term: request.term },
                    success: function (data) {
                        alert(data);
                        customData = $.map(data, function (item) {
                            userId = item.UserId;
                            return { label: item.Name + "(" + item.Email + ")", value: item.Name }
                        });
                        response(customData, extractLast(request.term))
                    }
                })
            },
            focus: function () {
                // prevent value inserted on focus
                return false;
            },
            select: function (event, ui) {
                var usersIdVal = $("#UsersId").val();
                usersIdVal += ", " + userId;
                $("#UsersId").val(usersIdVal)

                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;
            }
        });
});
function split(val) {
    return val.split(/,\s*/);
}
function extractLast(term) {
    return split(term).pop();
}

控制器代码：

public JsonResult AutoCompleteUsers(string term)
    {
        var result = (from r in db.UserItems
                      where r.Name.ToLower().Contains(term.ToLower())
                      select new { r.Name, r.Email, r.UserId }).Distinct();
        return Json(result, JsonRequestBehavior.AllowGet);
    }

当我尝试静态javascript数组时，自动完成多个值的工作完美无缺！

我认为错误可能在这个区块中，但我不知道解决方案

customData = $.map(data, function (item) {
                            userId = item.UserId;
                            return { label: item.Name + "(" + item.Email + ")", value: item.Name }
                        });

Answer 1

感谢每一位试图解决我问题的人，不管是谁，我解决了我的问题，这是每个人的解决方案：
我的观点代码：

@Html.TextBox("SentUsers", "", new { @class = "text-box"})
@Html.Hidden("UsersId")

我的javascript代码：

<script type="text/javascript">
$(function () {
    $("#SentUsers")
        .bind("keydown", function (event) {
            if (event.keyCode === $.ui.keyCode.TAB &&
            $(this).data("ui-autocomplete").menu.active) {
                event.preventDefault();
            }
        })
        .autocomplete({
            minLength: 2,
            source: function( request, response ) {
                $.getJSON("/Ajax/AutoCompleteUsers", {
                    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 usersIdVal = $("#UsersId").val();
                usersIdVal += ", " + ui.item.userId;
                $("#UsersId").val(usersIdVal)

                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;
            }
        });
});
function split(val) {
    return val.split(/,\s*/);
}
function extractLast(term) {
    return split(term).pop();
}

我的控制器代码：

public JsonResult AutoCompleteUsers(string term)
    {
        var result = (from r in db.UserItems
                      where r.Name.ToLower().Contains(term.ToLower())
                      select new { label = r.Name + "(" + r.Email + ")", value = r.Name, userId = r.UserId }).Distinct();

        return Json(result, JsonRequestBehavior.AllowGet);
    }

MVC jquery自动完成多个值仅适用于第一次

1 个答案: