javascript - 如何让我的 jquery 自动完成来填写 MVC 中的多个字段？

Question

我正在尝试在 jquery 中设置一个自动完成功能，以从 Active Directory 中的用户那里获取信息。用户可以输入一个人的姓氏的几个字母，然后返回一个二维列表 (List>)，其中包含姓氏以这些字母开头的所有人。每个列表包含一个人的名字、中间名、姓氏和 AD 名称。当然，每个 List> 元素都代表一个人。

我在 jquery 中获取数据没有问题。问题是，一旦用户单击列表中的名称，我似乎无法弄清楚如何使用此数组中的信息填充 Employee_Name 和 Employee_Name_AD 字段。这是我的jQuery代码：

@section page {
    <script type="text/javascript">
        $(document).ready(function () {
            var name;
            var adname;
            $("#TESTING").autocomplete(
                {
                    source: function (request, response) {
                        $.ajax({
                            url: "/Employees/GetUserList",
                            type: "POST",
                            dataType: "json",
                            data: { query: request.term },
                            success: function (data) {
                                response($.map(data, function (item) {
                                    name = item[0] + " " + item[1] + " " + item[2];
                                    adname = item[3];

                                    return { label: name, data: [name, adname] };

                                }))
                            },
                            select: function (event, ui) {

                                $('#Employee_Name').val(ui.data.item.data[0]);
                                $('#Employee_Name_AD').val(ui.data.item.data[1]);
                            }
                        })
                    },                    
                });
        })
    </script>
}

在同一页面上，这里是适用的 Razor 代码：

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        <h4>Employee</h4>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })

        <div class="form-group">
            <div class="col-md-10">
                @Html.TextBox("TESTING")
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Employee_Name, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Employee_Name, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Employee_Name, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Employee_Name_AD, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Employee_Name_AD, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Employee_Name_AD, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Create" class="btn btn-default" />
            </div>
        </div>
    </div>
}

由于堆栈溢出，我发现了一些非常接近我想要的东西：http: //jsbin.com/vasuliru/2/edit ?html,js,output

上一个示例的问题是数据是在页面本身上声明的，而不是从数据源中提取的。如何修改我的代码以使其执行我想要的操作？

标签： javascriptjquerymodel-view-controllerrazorjquery-ui-autocomplete

Answer 1

在我在 php 中遇到了一些东西之后，我终于要找到一个解决方案：Jquery ui autocomplete on multiple input fields with ajax results。

我的最终代码是这样的：

@section page {
    <script type="text/javascript">
        $(document).ready(function () {
            var name;
            var adname;
            $("#UserLookup").autocomplete(
                {
                    source: function (request, response) {
                        $.ajax({
                            url: "/Employees/GetUserList",
                            type: "POST",
                            dataType: "json",
                            data: { query: request.term },
                            success: function (data) {
                                response($.map(data, function (item) {
                                    name = item[0] + " " + item[1] + " " + item[2];
                                    adname = item[3];
                                    console.log(adname);

                                    return { label: name, data: item }

                                }));
                            }
                        });
                    },
                    select: function (event, ui) {
                        console.log(ui.item);
                        $(this).val(ui.item.label);
                        var userid = ui.item.value;
                        console.log("Here is the userid:");
                        console.log(item);
                        console.log(ui.item.data[3]);
                        $('#Employee_Name').val(ui.item.value);
                        $('#Employee_Name_AD').val(ui.item.data[3]);
                    }
                });                    

        });
    </script>
}