Make HTML TextBox AutoComplete ignore some inputs. MVC

I Have a TextBox that is hidden and its text will automatically change to a dropdown menu’s text, unless the optionLabel of the Dropdown menu is selected, in which case the user can enter a custom string (not from the dropdown menu).

I currently have autocomplete off for the textbox, because the options from the dropdown menu (when the textbox is hidden) would also show up for the autocomplete. Is there a way to prevent some values from being stored in the autocomplete menu?

Everything else in the code works properly.

relevant code:

<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();

        });
    }

Answer

You can try the following JavaScript code to change between type=”text” and 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');
            }
        });
    });