JQuery UI 自动完成 ASP MVC Razor 上的多个文本框

JQuery UI Autocomplete Multiple Textbox on ASP MVC Razor

本文关键字：文本 Razor MVC UI ASP JQuery 更新时间：2023-09-26

>我返回一个类对象，但只有XRCFOR文本框正确填充。选择事件似乎不起作用。通过 WebServe，我返回对象项。但是，选择行上的事件仅填充 XRCFOR 文本框。这是 Html/razor/Jquery 代码。谢谢。

<td>
  @Html.EditorFor(model => model.XRUDBF, Functions.GetAdditionalViewData(ViewData["PageStatus"].ToString(), ViewData["PageReadonly"].ToString(), "form-control"))
   @Html.EditorFor(model => model.XRCFOR, Functions.GetAdditionalViewData(ViewData["PageStatus"].ToString(), ViewData["PageReadonly"].ToString(), "form-control"))
   @Html.EditorFor(model => model.XRCFORDescription, new {htmlAttributes= new { @class = "form-control", @readonly = "readonly" }})
    <script type="text/javascript">                        
                $("#XRCFOR").autocomplete({
                    source: function (request, response) {
                        $.ajax({
                            url: "/Zoom/GetFOR/",
                            type: "POST",
                            dataType: "json",
                            data: { term: request.term },
                            success: function (data) {
                                response($.map(data, function (item) {
                                    return {
                                        label: item.B5CFOR + " - " + item.B5RGS1, value: item.B5CFOR
                                    };
                                }))
                            }
                        })
                    },
                    select: function (event, ui) {
                        $("#XRUDBF").val(ui.item.B5CUDB);
                        $("#XRCFOR").val(ui.item.B5CFOR);
                        $("#XRCFORDescription").val(ui.item.B5RGS1);
                    },
                    //messages: {
                    //    noResults: '',
                    //    results: function () { }
                    //},
                    minLength: 1
                });
    </script>
</td>

我找到了这个解决方案

success: function (data) {
                        response($.map(data, function (item) {
                            return {
                                label: item.B5CFOR + " - " + item.B5RGS1, value: item.B5CFOR, extravalue: item
                            };
                        }))
                    }

然后

        select: function (event, ui) {
            $("#XRUDBF").val(ui.item.extravalue.B5CUDB);
            $("#XRCFORDescription").val(ui.item.extravalue.B5RGS1);
        },

工作正常！