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