使 HTML 文本框自动完成忽略某些输入。 MVC答案

【问题标题】：Make HTML TextBox AutoComplete ignore some inputs. MVC使 HTML 文本框自动完成忽略某些输入。 MVC
【发布时间】：2022-01-26 14:30:29
【问题描述】：

我有一个隐藏的文本框，它的文本将自动更改为下拉菜单的文本，除非选择了下拉菜单的 optionLabel，在这种情况下，用户可以输入自定义字符串（而不是从下拉菜单中）。

我目前关闭了文本框的自动完成功能，因为下拉菜单中的选项（文本框隐藏时）也会显示自动完成功能。有没有办法防止某些值存储在自动完成菜单中？

代码中的其他一切都正常工作。

相关代码：

<div class="form-group">
    @Html.LabelFor(model => model.StudentId, htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        <div id="SessionAttendDrop">
            @Html.DropDownListFor(model => model.StudentId, new SelectList(ViewBag.FirstStudentsIds, "Value", "Text"), defaultText, htmlAttributes: new { @class = "form-control", @style = "display:inline;" })
            <button class="btn btn-default" id="noStudentButton" type="button" onclick="setNoStudent()" >Custom</button>
        </div>
        @Html.ValidationMessageFor(model => model.StudentId, "", new { @class = "text-danger" })
        @Html.TextBoxFor(model => model.StudentName, htmlAttributes: new { @class = "form-control", @style = "display:inline;", @autocomplete = "off" })
        @Html.ValidationMessageFor(model => model.StudentName, "", new { @class = "text-danger" })

    </div>
</div>

<script type="text/javascript">
    $(document).ready(function () {
        //initionalize hidden element
        var text = $("option:selected", '#StudentId').text();
        //check if loaded option is a student: if so, show; if not, hide
        if ($('#StudentId').val() != "") {
            $('#StudentName').val(text);
            $('#StudentName').hide();
        } else {
            $('#StudentName').show();
        }


        $('#StudentId').change(function () {
            var text = $("option:selected", this).text();
            var selectedValue = $(this).val();
            if (selectedValue != "") {
                //if the option isn't the optionLabel option
                $('#StudentName').val(text);
                //document.getElementById("StudentName")
                $('#StudentName').hide();
            } else {
                $('#StudentName').val("");
                $('#StudentName').show();
            }
        });
    });
    function setNoStudent() {
        $("#StudentId").each(function () {
            var oldValue = this.value;
            this.value = "";
            if (oldValue != "") $(this).change();

        });
    }

【问题讨论】：

标签： javascript html jquery asp.net-mvc autocomplete

【解决方案1】：

您可以尝试以下 JavaScript 代码在 type="text" 和 type="hidden" 之间进行切换：

    $(document).ready(function () {
        var text = $("option:selected", '#StudentId').text();
        //check if loaded option is a student: if so, show; if not, hide
        if ($('#StudentId').val() != "") {
            //hide
            $('#StudentName').val(text);
            $('#StudentName').attr('type', 'hidden');
        } else {
            //show
            $('#StudentName').attr('type', 'text');
        }

        $('#StudentId').change(function () {
            var text = $("option:selected", this).text();
            var selectedValue = $(this).val();
            //if the option isn't the optionLabel option, change the studentName to the dropdown text (and hide it), otherwise clear it (and show it).
            if (selectedValue != "") {
                //hide
                $('#StudentName').val(text);
                $('#StudentName').attr('type', 'hidden');
            } else {
                //show
                $('#StudentName').val("");
                $('#StudentName').attr('type', 'text');
            }
        });
    });

【讨论】：