これは、Teddy が最近カプセル化した AutoCompleteTextBox です。 ASP.NET 独自の TextBox も特定のオートコンプリート機能をサポートしていることはわかっていますが、ブラウザーの実装に依存しているため、カスタムのオートコンプリート候補を指定できません。この記事に記載されている AutoCompleteTextBox は、この欠点を補います。 AutoCompleteTextBox.AutoCompleteData プロパティを設定し、string[] を渡すだけで、TextBox がカスタム候補をサポートできるようになります。
現在の入力に一致する候補がない場合、AutoComplete ロジックは
通常の TextBox と同じになります。
現在の入力と一致する候補が 1 つだけの場合、候補は自動的に完了します。
複数の候補が現在の入力に一致する場合、最初の候補がテキスト ボックスに自動的に入力され、すべての候補を含むポップアップ ボックスが表示されます。
実装ソース
コードはVS2005でコンパイルされていますが、実際には2.0に依存した構文はほとんど使用されておらず、最小限の修正でvs2003でもコンパイル可能です。
システムを使用する;
System.Collections.Generic を使用します。
System.ComponentModel を使用します。
System.Text を使用します。
System.Web を使用します。
System.Web.UI を使用します。
System.Web.UI.WebControls を使用します。
System.Web.UI.HtmlControls
名前空間 Ilungasoft.Framework.Web.UI.WebControls
を使用します。
{
[ToolboxData("<{0}:AutoCompleteTextBox runat=server></{0}:AutoCompleteTextBox>")]
パブリック クラス AutoCompleteTextBox : WebControl
{
プライベート メンバー#region プライベート メンバー
private TextBox textBox = new TextBox();
private HtmlGenericControl autoCompleteFrame = new HtmlGenericControl();
プライベート文字列 ToJsStringArray(params string[] strs)
{
if (strs != null && strs.Length > 0)
{
StringBuilder sb = 新しい StringBuilder();
sb.Append(" new Array(");
foreach (string str in strs)
{
sb.Append(string.Format("'{0}', ", str.Replace("'", " \' ")));
sb.ToString().TrimEnd(',', ' ') + ");"; を返します
。
}
それ以外
{
"新しい配列;" を返します。
}
プライベート
文字列 MakeUniqueID(文字列 ID)
{
if (id != null && id.Trim().Length > 0)
{
return string.Concat(this.UniqueID.Replace("$", "_"), "_", id);
}
それ以外
{
return this.UniqueID.Replace("$", "_");
}
#endregion
#region
プロパティ
[バインド可能(true)]
[カテゴリー(「外観」)]
[デフォルト値("")]
[ローカライズ可能(true)]
パブリック文字列 テキスト
{
得る
{
if (Page.IsPostBack)
{
textBox.Text = Page.Request.Form[MakeUniqueID("textBox")];
}
textBox.Text を返します。
}
セット
{
textBox.Text = 値;
}
[バインド可能(true)
]
[カテゴリ(「動作」)]
[デフォルト値("")]
[ローカライズ可能(true)]
public int MaxLength
{
得る
{
textBox.MaxLength を返します。
}
セット
{
textBox.MaxLength = 値;
}
[バインド可能(true)
]
[カテゴリ(「動作」)]
[デフォルト値(false)]
[ローカライズ可能(true)]
パブリックブール読み取り専用
{
得る
{
textBox.ReadOnly を返します。
}
セット
{
textBox.ReadOnly = 値;
}
}
パブリック文字列[] AutoCompleteData
{
得る
{
string[] s = (string[])ViewState["AutoCompleteData"];
return ((s == null) ? null : s);
}
セット
{
ViewState["AutoCompleteData"] = 値;
}
#endregion
オーバーライドされたメンバー#region オーバーライドされたメンバー
protected
override void CreateChildControls()
{
create textBox#region create textBox
textBox.ID = MakeUniqueID("textBox");
textBox.AutoCompleteType = AutoCompleteType.Disabled;
textBox.Attributes.Add("onkeypress", string.Format("return __DoAutoComplete(event, '{0}')", MakeUniqueID(null)));
textBox.Attributes.Add("onblur", string.Format("if (!document.show_{0}) document.getElementById('{1}').style.display = 'none';", MakeUniqueID(null) 、MakeUniqueID("autoCompleteFrame")));
textBox.Width = 幅;
#endregion
create autoCompleteFrame#region create autoCompleteFrame
autoCompleteFrame.TagName = "iframe";
autoCompleteFrame.ID = MakeUniqueID("autoCompleteFrame");
autoCompleteFrame.Attributes.Add("style", "display:none;position:absolute;border:ridge 1px");
autoCompleteFrame.Attributes.Add("フレームボーダー", "0");
autoCompleteFrame.Attributes.Add("マージン高さ", "0");
autoCompleteFrame.Attributes.Add("マージン幅", "2");
autoCompleteFrame.Attributes.Add("スクロール", "自動");
autoCompleteFrame.Attributes.Add("width", width.ToString());
autoCompleteFrame.Attributes.Add("高さ", "100px");
autoCompleteFrame.Attributes.Add("src", "javascript:''");
autoCompleteFrame.Attributes.Add("onmouseover", string.Format("document.show_{0} = true;", MakeUniqueID(null)));
"
onmouseout", string.Format("document.show_{0} = false;", MakeUniqueID(null)));
protected オーバーライド void OnPreRender(EventArgs e
)
{
クライアント スクリプト ブロックの登録#region クライアント スクリプト ブロックの登録
if (!Page.ClientScript.IsClientScriptBlockRegistered("__DoAutoComplete"))
{
文字列スクリプト = string.Concat(
"<script language="javascript" type="text/javascript">rn",
" var isOpera = navigator.userAgent.indexOf('Opera') > -1;rn",
" var isIE = navigator.userAgent.indexOf('MSIE') > 1 && !isOpera;rn",
" var isMoz = navigator.userAgent.indexOf('Mozilla/5.') == 0 && !isOpera;rn",
"rn"、
" 関数 textboxSelect (oTextbox, iStart, iEnd)rn",
" {rn",
" switch(arguments.length) {rn",
"ケース 1:rn",
" oTextbox.select();rn",
" 休憩;rn",
"rn"、
"ケース 2:rn",
" iEnd = oTextbox.value.length;rn",
" /* は */rn",
" rn",
" ケース 3: rn",
" if (isIE) {rn",
"var oRange = oTextbox.createTextRange();rn",
" oRange.moveStart("character", iStart);rn",
" oRange.moveEnd("character", -oTextbox.value.length + iEnd); rn",
" oRange.select(); rn",
" } else if (isMoz){rn",
" oTextbox.setSelectionRange(iStart, iEnd);rn",
" } rn",
" }rn",
"rn"、
" oTextbox.focus();rn",
" }rn",
"rn"、
" 関数 textboxReplaceSelect (oTextbox, sText)rn",
" {rn",
" if (isIE) {rn",
"var oRange = document.selection.createRange();rn",
" oRange.text = sText;rn",
" oRange.collapse(true);rn",
" oRange.select(); rn",
" } else if (isMoz) {rn",
"var iStart = oTextbox.selectionStart;rn",
" oTextbox.value = oTextbox.value.substring(0, iStart) + sText + oTextbox.value.substring(oTextbox.selectionEnd, oTextbox.value.length);rn",
" oTextbox.setSelectionRange(iStart + sText.length, iStart + sText.length);rn",
" }rn",
"rn"、
" oTextbox.focus();rn",
" }rn",
"rn"、
" 関数 autocompleteMatch (sText, arrValues)rn",
" {rn",
" var retMatches = ""; rn",
" rn",
" for (var i=0; i < arrValues.length; i++)rn",
" {rn",
" if (arrValues[i].indexOf(sText) == 0)rn",
" {rn",
" retMatches += arrValues[i] + ',';rn",
" }rn",
" }rn",
" rn",
" if (retMatches.length > 0)rn",
" {rn",
" retMatches = retMatches.substr(0, retMatches.length - 1);rn",
" } rn",
"rn"、
" retMatches を返します;rn",
" }rn",
"rn"、
" 関数 __DoAutoComplete(oEvent, id)rn",
" {rn",
" var oTextbox = document.getElementById(id + '_textBox');rn",
" var Frame = document.getElementById(id + '_autoCompleteFrame');rn",
" var arrValues = document[id + '_data'];rn",
" rn",
" スイッチ (oEvent.keyCode) rn",
" {rn",
" ケース 38: //上矢印 rn",
"ケース 40: //下矢印rn",
"ケース 37: //左矢印rn",
"ケース 39: //右矢印rn",
" ケース 33: //ページアップ rn",
" case 34: //ページダウン rn",
" ケース 36: // ホーム rn",
" ケース 35: // 終了 rn",
" ケース 13: // rn を入力",
" ケース 9: // タブ rn",
" ケース 27: //esc rn",
" ケース 16: // シフト rn",
" ケース 17: //ctrl rn",
" ケース 18: //alt rn",
"ケース 20: //caps ロックrn",
" ケース 8: //バックスペース rn",
"ケース 46: //削除rn",
" true を返します;rn",
" 休憩;rn",
" rn",
"デフォルト:rn",
" textboxReplaceSelect(oTextbox, String.fromCharCode(isIE ? oEvent.keyCode : oEvent.charCode));rn",
" var iLen = oTextbox.value.length;rn",
"rn"、
" var sMatches = autocompleteMatch(oTextbox.value, arrValues);rn",
"rn"、
" if (sMatches.length > 0)rn",
" {rn",
"var arrMatches = sMatches.split(',');rn",
" oTextbox.value = arrMatches[0];rn",
" textboxSelect(oTextbox, iLen, oTextbox.value.length);rn",
" rn",
" if (arrMatches.length > 1)rn",
" {rn",
" Frame.style.display = 'inline';rn",
" フレーム.高さ = '100';rn",
" rn",
"frame.contentWindow.document.body.innerHTML = '';rn",
" for (var i = 0; i < arrMatches.length; i++)rn",
" {rn",
" Frame.contentWindow.document.body.innerHTML += '<div style="width: 100%; カーソル:default" onmouseover="this.style.backgroundColor=\'#316AC5\'; style.color=\'white\';" onmouseout="this.style.backgroundColor=\'\'; this.style.color=\'black\';" onclick= "parent.document.getElementById( \'' + id + '_textBox\').value = this.innerHTML">' + arrMatches[i] + '</div>';rn",
" }rn",
" rn",
"frame.contentWindow.document.body.style.backgroundColor = '白';rn",
" Frame.contentWindow.document.onclick = function() { document.getElementById(id + '_autoCompleteFrame').style.display = 'none'; };rn",
" } rn",
" } rn",
" rn",
" false を返します;rn",
" } rn",
" }rn",
"</script>rn",
"");
Page.ClientScript.RegisterClientScriptBlock(typeof(string), "__DoAutoComplete", script);
if (!Page.ClientScript.IsClientScriptBlockRegistered(MakeUniqueID("data"))
)
{
Page.ClientScript.RegisterClientScriptBlock(typeof(string), MakeUniqueID("data"), string.Format("<script language="javascript" type="text/javascript">document.{0}_data = { 1}</script>", MakeUniqueID(null), ToJsStringArray(AutoCompleteData)));
#エンド
リージョン
protected
オーバーライド void RenderContents(HtmlTextWriter 出力)
{
Output.WriteLine(string.Format("<div onmouseleave="document.getElementById('{0}').style.display = 'none';" style="width:{1}" >", MakeUniqueID("autoCompleteFrame"), 幅));
textBox.RenderControl(出力);
Output.WriteLine("<br />");
autoCompleteFrame.RenderControl(出力);
Output.WriteLine("</div>");
#エンド
リージョン
}
}
ダウンロード