นี่คือ AutoCompleteTextBox ที่ Teddy เพิ่งห่อหุ้มไว้ เรารู้ว่ากล่องข้อความของ ASP.NET ยังสนับสนุนฟังก์ชันการทำให้สมบูรณ์อัตโนมัติบางอย่างด้วย แต่ขึ้นอยู่กับการใช้งานเบราว์เซอร์และไม่สามารถระบุตัวเลือกการทำให้สมบูรณ์อัตโนมัติแบบกำหนดเองได้ AutoCompleteTextBox ที่แสดงอยู่ในบทความนี้ประกอบขึ้นสำหรับข้อบกพร่องนี้ เพียงตั้งค่าคุณสมบัติ AutoCompleteTextBox.AutoCompleteData และส่ง string[] เพื่อทำให้กล่องข้อความสนับสนุนตัวเลือกแบบกำหนดเอง
หากไม่มีตัวเลือกที่ตรงกับอินพุตปัจจุบัน ตรรกะการทำให้สมบูรณ์อัตโนมัติ
จะเหมือนกับกล่องข้อความปกติ
หากมีผู้สมัครเพียงรายเดียวที่ตรงกับอินพุตปัจจุบัน ระบบจะเสร็จสิ้นโดยอัตโนมัติ
หากมีผู้สมัครมากกว่าหนึ่งรายที่ตรงกับอินพุตปัจจุบัน ผู้สมัครคนแรกจะถูกกรอกโดยอัตโนมัติในกล่องข้อความ และกล่องป๊อปอัปที่มีผู้สมัครทั้งหมดจะถูกป็อปอัพ
การใช้งาน
ถูกคอมไพล์ใน 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
-
สมาชิกส่วนตัว # ภูมิภาค สมาชิกส่วนตัว
กล่องข้อความส่วนตัว = กล่องข้อความใหม่ ();
ส่วนตัว HtmlGenericControl autoCompleteFrame = HtmlGenericControl ใหม่ ();
สตริงส่วนตัว ToJsStringArray (สตริง params [] strs)
-
ถ้า (strs != null && strs.Length > 0)
-
StringBuilder sb = StringBuilder ใหม่ ();
sb.Append(" new Array(");
foreach (สตริง str ใน strs)
-
sb.Append(string.Format("'{0}', ", str.Replace("'", " \' ")));
}
ส่งคืน sb.ToString().TrimEnd(',', ' ') + ");";
-
อื่น
-
กลับ "อาร์เรย์ใหม่;";
-
}
สตริงส่วนตัว MakeUniqueID(รหัสสตริง)
-
ถ้า (id != null && id.Trim().Length > 0)
-
return string.Concat(this.UniqueID.Replace("$", "_"), "_", id);
-
อื่น
-
ส่งคืน this.UniqueID.Replace("$", "_");
-
}
#endregion
Properties#region Properties
[ผูกได้ (จริง)]
[หมวดหมู่("ลักษณะที่ปรากฏ")]
[ค่าเริ่มต้น("")]
[แปลได้ (จริง)]
ข้อความสตริงสาธารณะ
-
รับ
-
ถ้า (หน้า IsPostBack)
-
textBox.Text = Page.Request.Form[MakeUniqueID("textBox")];
-
กลับกล่องข้อความข้อความ;
-
ชุด
-
textBox.Text = ค่า;
-
}
[ผูกมัดได้(จริง)]
[หมวดหมู่("พฤติกรรม")]
[ค่าเริ่มต้น("")]
[แปลได้ (จริง)]
สาธารณะ int MaxLength
-
รับ
-
กลับ textBox.MaxLength;
-
ชุด
-
textBox.MaxLength = ค่า;
-
}
[ผูกมัดได้(จริง)]
[หมวดหมู่("พฤติกรรม")]
[ค่าเริ่มต้น (เท็จ)]
[แปลได้ (จริง)]
บูลสาธารณะ อ่านอย่างเดียว
-
รับ
-
กลับกล่องข้อความอ่านอย่างเดียว;
-
ชุด
-
textBox.ReadOnly = ค่า;
-
}
สตริงสาธารณะ[] ข้อมูลการทำให้สมบูรณ์อัตโนมัติ
-
รับ
-
สตริง[] s = (สตริง[])ViewState["ข้อมูลการทำให้สมบูรณ์อัตโนมัติ"];
กลับ ((s == null) ? null : s);
-
ชุด
-
ViewState["ข้อมูลการทำให้สมบูรณ์อัตโนมัติ"] = ค่า;
-
}
#endregion
Overriden Members#region Overriden Members
ป้องกันการแทนที่ void CreateChildControls()
-
สร้าง textBox#region สร้าง 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
สร้าง autoCompleteFrame#region สร้าง autoCompleteFrame
autoCompleteFrame.TagName = "iframe";
autoCompleteFrame.ID = MakeUniqueID("autoCompleteFrame");
autoCompleteFrame.Attributes.Add("style", "display:none; ตำแหน่ง: สัมบูรณ์; เส้นขอบ: สันเขา 1px");
autoCompleteFrame.Attributes.Add("frameborder", "0");
autoCompleteFrame.Attributes.Add("ระยะขอบ", "0");
autoCompleteFrame.Attributes.Add("ความกว้างของขอบ", "2");
autoCompleteFrame.Attributes.Add("เลื่อน", "อัตโนมัติ");
autoCompleteFrame.Attributes.Add("ความกว้าง", ความกว้าง ToString());
autoCompleteFrame.Attributes.Add("ความสูง", "100px");
autoCompleteFrame.Attributes.Add("src", "javascript:''");
autoCompleteFrame.Attributes.Add("onmouseover", string.Format("document.show_{0} = true;", MakeUniqueID(null)));
autoCompleteFrame.Attributes.Add("onmouseout", string.Format("document.show_{0} = false;", MakeUniqueID(null)));
#endregion
}
การป้องกันแทนที่เป็นโมฆะ OnPreRender (EventArgs e)
-
ลงทะเบียน Client Script Block#region ลงทะเบียน Client Script Block
ถ้า (!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",
" สวิตช์(arguments.length) {rn",
"กรณีที่ 1:rn",
" oTextbox.select();rn",
" พัง;rn",
"rn",
"กรณีที่ 2:rn",
" iEnd = oTextbox.value.length;rn",
" /* ตกผ่าน */rn",
" rn",
" กรณีที่ 3: rn",
" ถ้า (isIE) {rn",
"var oRange = oTextbox.createTextRange();rn",
" oRange.moveStart("ตัวละคร", iStart);rn",
" oRange.moveEnd("ตัวละคร", -oTextbox.value.length + iEnd); rn",
" oRange.select(); rn",
" } อย่างอื่นถ้า (isMoz){rn",
" oTextbox.setSelectionRange(iStart, iEnd);rn",
" } rn",
" }rn",
"rn",
" oTextbox.focus();rn",
" }rn",
"rn",
" ฟังก์ชั่น textboxReplaceSelect (oTextbox, sText)rn",
" {rn",
" ถ้า (isIE) {rn",
"var oRange = document.selection.createRange();rn",
" oRange.text = sText;rn",
" oRange.collapse(true);rn",
" oRange.select(); rn",
" } อย่างอื่นถ้า (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",
" ถ้า (arrValues[i].indexOf(sText) == 0)rn",
" {rn",
" retMatches += arrValues[i] + ',';rn",
" }rn",
" }rn",
" rn",
" ถ้า (retMatches.length > 0)rn",
" {rn",
" retMatches = retMatches.substr(0, retMatches.length - 1);rn",
" } rn",
"rn",
" return 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",
" กรณีที่ 34: //เลื่อนหน้าลง rn",
" กรณีที่ 36: //home rn",
" กรณีที่ 35: //end rn",
" กรณีที่ 13: //ป้อน rn",
" กรณีที่ 9: //tab rn",
" กรณีที่ 27: //esc rn",
" กรณีที่ 16: //shift rn",
" กรณีที่ 17: //ctrl rn",
" กรณีที่ 18: //alt rn",
"กรณีที่ 20: //caps lockrn",
" กรณีที่ 8: //backspace rn",
"กรณีที่ 46: // ลบrn",
" กลับจริง;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",
" ถ้า (sMatches.length > 0)rn",
" {rn",
"var arrMatches = sMatches.split(',');rn",
" oTextbox.value = arrMatches[0];rn",
" textboxSelect(oTextbox, iLen, oTextbox.value.length);rn",
" rn",
" ถ้า (arrMatches.length > 1)rn",
" {rn",
" frame.style.display = 'อินไลน์';rn",
" frame.height = '100';rn",
" rn",
" frame.contentWindow.document.body.innerHTML = '';rn",
" สำหรับ (var i = 0; i < arrMatches.length; i++)rn",
" {rn",
" frame.contentWindow.document.body.innerHTML += '<div style="width: 100%; cursor: default" onmouseover="this.style.wallpaper=\'#316AC5\'; style.color=\'white\';" onmouseout="this.style.พื้นหลังสี=\'\'; this.style.color=\'black\';" onclick= "parent.document.getElementById( \'' + id + '_textBox\').value = this.innerHTML">' + arrMatches[i] + '</div>';rn",
" }rn",
" rn",
" frame.contentWindow.document.body.style.wallpaperColor = 'สีขาว';rn",
" frame.contentWindow.document.onclick = function() { document.getElementById(id + '_autoCompleteFrame').style.display = 'none'; };rn",
" } rn",
" } rn",
" rn",
" return false;rn",
" } rn",
" }rn",
"</script>rn",
-
Page.ClientScript.RegisterClientScriptBlock(typeof(string), "__DoAutoComplete", สคริปต์);
}
ถ้า (!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(ข้อมูลการทำให้สมบูรณ์อัตโนมัติ)));
}
#endregion
}
การป้องกันแทนที่เป็นโมฆะ RenderContents (เอาต์พุต HtmlTextWriter)
-
output.WriteLine(string.Format("<div onmouseleave="document.getElementById('{0}').style.display = 'none';" style="width:{1}" >", MakeUniqueID("autoCompleteFrame"), ความกว้าง));
textBox.RenderControl(เอาท์พุท);
เอาท์พุทWriteLine("<br />");
autoCompleteFrame.RenderControl (เอาต์พุต);
เอาท์พุทWriteLine("</div>");
}
#endregion
-
-
ดาวน์โหลด