テキストボックス値のオートコンプリートに jquery uiを使用しました。
配列を作成し、 name と id を auto-complete のソースにバインドしました。最初は、ユーザーがリストから選択しない場合、これに対して何らかのアクションを実行する必要があるという問題がありました。次に、上記の問題を検索し、ui auto-complete の変更イベントを使用する解決策を知りました。しかし、今では、リストからアイテムを選択しているときにテキストボックスに id が表示され、フォーカスを失っているときに name のみが表示されるという新しい問題が発生します。非表示フィールドに設定しているユーザーにIDを表示しないでください。
これを回避するには?
次のコードを使用しました-
ウェブページのコードは -
<div class="editor-field">
@if (Model.ReportsTo != null)
{
@Html.TextBox("ReportsTo_FullName", Model.ReportsTo.FullName)
}
else
{
@Html.TextBox("ReportsTo_FullName", String.Empty, new { @id = "ReportsTo_FullName" })
}
@Html.HiddenFor(model => model.ReportsToId, "ReportsToId")
@Html.ValidationMessageFor(model => model.ReportsToId)
</div>
スクリプトからのコード-
$(function () {
$("#ReportsTo_FullName").autocomplete({
source: function (request, response) {
$.ajax({
url: "/Employee/AutocompleteSuggestions",
type: "POST",
dataType: "json",
data:
{
term: request.term,
moduleName: "Employee"
},
success: function (data) {
response($.map(data, function (item) {
return { label: item.FullName, value: item.Id }
}
))
}
})
},
minLength: 1,
focus: function (event, ui) {
$("#ReportsTo_FullName").val(ui.item.label);
return false;
},
change: function (event, ui) {
if (ui.item != null) {
$("#ReportsTo_FullName").val(ui.item.label);
$("#ReportsToId").val(ui.item.value);
return false;
}
else {
$("#ReportsTo_FullName").css("color", "red");
}
}
});
});