Как я могу получить автозаполнение jquery для заполнения нескольких полей в MVC? - PullRequest
Новая
       28

Как я могу получить автозаполнение jquery для заполнения нескольких полей в MVC?

0 голосов
/ 23 января 2020

Я пытаюсь настроить автозаполнение в jquery, которое получает информацию от пользователя в Active Directory. Пользователь может ввести несколько букв фамилии человека, и в результате появится двухмерный список (Список>), содержащий всех людей, чья фамилия начинается с этих букв. Каждый список содержит имя, отчество, фамилию и 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, вывод

Проблема предыдущего примера заключается в том, что данные объявляются на самой странице, а не извлекаются из источника данных. Как я могу изменить свой код, чтобы заставить его делать то, что я хочу?

1 Ответ

0 голосов
/ 24 января 2020

Я наконец-то нашел решение, после того как наткнулся на что-то в php: Jquery пользовательское автозаполнение в нескольких полях ввода с ajax результатами .

My окончательный код такой: 

@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>
}
...