AJAX.NET框架构建Lookup服务器控件

　　四、 查找JavaScript

　　我以前从来没在JavaScript中处理过键盘问题（由我自己写一个大而复杂的脚本太复杂了）。我了解JavaScript，只是掌握得不如象C#一样好，因此我的第一反应是"在网上查找一些适合于我们的需要的东西"。应该说，没有多少自由脚本可用。我花了大约一个小时才找到一个好脚本。其参考地址是：http: //www.nsftools.com/tips/XmlHttpLookup.js。

　　该脚本提供了一个函数来查询服务器。我仅在mainLoop函数中作了一点修改即满足了我的要求。

mainLoop = function() {
　val = escape(queryField.value);
　if(lastVal != val && searching == false){
　　var response = Main.GetSearchItems(val);
　　showQueryDiv('smi'， response.value); lastVal = val;
　}
　setTimeout('mainLoop()'， 100);
　return true;
};

　　该脚本应该经由onload处理器启用：

＜body onload="InitQueryCode('search')"＞

　　最后，我用了很少的时间就实现我所需要的功能。但遗憾的是，该方案无法重用；因此我决定创建一个简单的服务器控件。

　　五、 服务器控件

　　该AJAX查找服务器控件很简单。原有解决方案的下列部分可进一步定制：

　　· 回调函数的命名。

　　· JavaScript文件的路径。

　　· 匹配列表的背景和加亮，div padding，等等的颜色。

　　具体实现相当简单。首先，我们可以从TextBox中派生我们的控件。然后，我们仅需要设置一些变量并注册一些JavaScript函数。

using System;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace play{
/// ＜summary＞
/// AjaxLookup.cs
/// ＜/summary＞
public class AjaxLookup : TextBox{
　private string scriptFile = "";
　private string callBackFunction = "";
　private string backgroundColor = "#EEE";
　private string highlightColor = "#CCC";
　private string font = "Verdana";
　private string divPadding = "2px";
　private string divBorder = "1px solid #CCC";
　public string ScriptFile{
　　get { return scriptFile; }
　　set { scriptFile = value; }
　}
　public string CallBackFunction{
　　get { return callBackFunction; }
　　set { callBackFunction = value; }
　}
　public string BackgroundColor{
　　get { return backgroundColor; }
　　set { backgroundColor = value; }
　}
　public string HighlightColor{
　　get { return highlightColor; }
　　set { highlightColor = value; }
　}
　public string DivFont{
　　get { return font; }
　　set { font = value; }
　}
　public string DivPadding{
　　get { return divPadding; }
　　set { divPadding = value; }
　}
　public string DivBorder{
　　get { return divBorder; }
　　set { divBorder = value; }
　}
　public AjaxLookup(){
　　this.Attributes.Add("autocomplete"， "off");
　}
　protected override void Render(HtmlTextWriter writer){
　　base.Render(writer);
　　//绑定包含几乎所有逻辑的脚本
　　Page.RegisterStartupScript("LoadScript"， "＜script language='JavaScript' src='" + ScriptFile + "'＞" +
"＜/script＞");
　　// 包括UI设置
　　string styles = String.Format( @"＜script language='JavaScript'＞var DIV_BG_COLOR = '{0}';
　　var DIV_HIGHLIGHT_COLOR = '{1}';
　　var DIV_FONT = '{2}';
　　var DIV_PADDING = '{3}';
　　var DIV_BORDER = '{4}';
　　＜/script＞"，
　　BackgroundColor， HighlightColor， DivFont，
　　DivPadding， DivBorder);
　　Page.RegisterStartupScript("LookupStyles"， styles);
　　// 初始化回寄处理
　　Page.RegisterStartupScript("RegisterScript"，
"＜script language='JavaScript'＞" +
"InitQueryCode('" + this.ClientID + "')＜/script＞");
　　//设置正确的回调函数
　　Page.RegisterStartupScript("RegisterCallBack"，
@"＜script language='JavaScript'＞
mainLoop = function() {
val = escape(queryField.value);
　　if(lastVal != val && searching == false){
　　　var response = " + CallBackFunction + @"(val);
　　　showQueryDiv('smi'， response.value); lastVal = val;
　　}
　　setTimeout('mainLoop()'， 100);
　　return true;};
　　＜/script＞");
　}
}

　　该控件可以通过如下方式使用：

＜Ajax:AjaxLookup
Runat="Server"
id="search"
BackgroundColor="#EEE"
DivBorder="1px solid #CCC"
DivPadding="2px"
DivFont="Arial"
HighlightColor="#C30"
CallBackFunction="Main.GetSearchItems"
ScriptFile="lookup.js" /＞

　　这里是查找控件在运行结果中看上去的样子：