データベースからのエントリの束が入力されているビューのASP.NETMVCにDropDownList
または同等のものが必要です。
を選択DropDownList
すると、ユーザーがテキストを入力できることを除いて、通常どおりリストが生成されDropDownList
ます。その時点で、の項目は入力されたテキストに基づいてフィルタリングされます。
ただし、ユーザーはリスト内のオプションの1つしか選択できないはずです。
それは他のコントロールである可能性がありますが、サードパーティのものではないことが望ましいです。
私はうまくいくまともな方法を見つけました。
これに関する唯一の問題は、2つの別々のコントロール(DropDownList
とTextBox
)が必要なことですが、それ以外は美しく機能します。
HTMLコード(コントロールの宣言)は次のとおりです。
<table>
<tr>
<td>
<div>
<%: Html.Label("Search Filter:")%>
</div>
</td>
<td>
<div>
<%: Html.TextBox("textBoxForFilterInput")%>
</div>
</td>
</tr>
<tr>
<td>
<div>
<%: Html.Label("The List")%>
</div>
</td>
<td>
<div>
<%: Html.DropDownList("listOfOptions")%>
</div>
</td>
</tr>
</table>
JavaScriptコードは次のとおりです。
$(function () {
var opts = $('#listOfOptions option').map(function () {
return [[this.value, $(this).text()]];
});
$('#textBoxForFilterInput').keyup(function () {
var rxp = new RegExp($('#textBoxForFilterInput').val(), 'i');
var optlist = $('#listOfOptions').empty();
opts.each(function () {
if (rxp.test(this[1])) {
optlist.append($('<option/>').attr('value', this[0]).text(this[1]));
}
});
});
});
次に、データを入力するだけで、準備が整い#listOfOptions
ます。
または、事前定義されたリスト/配列に接続するか、私のようにデータベースからフェッチすることもできます。
これは魅力のように機能し、非常にシンプルで超高速です。
正しい道に私を送ってくれたDMIに感謝します。
これに関する彼の仕事はここにあります。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加