匹配下拉控件

因为之前看到人家的一个匹配下拉控件，做得好酷，所以自己也开发了一个，虽然现在还比较丑陋，但还是能用的，还有很多不方便的地方要修改，所以源码就先不公布了。
先看看效果：

我点文本框的绿色图标，它会自动给我显示下拉项。

当我输入一个中字，它会自动匹配到凡是中字开头的项而显示出来。

基本上现在这个控件能达到这样的效果，可能用起来不是很方便有待改善，用时需要一个文本框，一个隐藏按钮控件，然后再拖拽这个匹配控件出来设置几个属性即可。
匹配控件的实现：
新建一个类，继承 WebControl。开始定义控件的属性。

[System.ComponentModel.NotifyParentProperty(true)]
        [Description("要匹配的控件的ID号")]
        [TypeConverter(typeof(ValidatedControlConverter))]
        [DefaultValue("")]
        public string MatchTextBoxID
        {
            get
            {
                string s = (string)ViewState["MatchTextBoxID"];
                return (s == null) ? "" : s;

            }
            set
            {
                ViewState["MatchTextBoxID"] = value;
            }
        }


        [System.ComponentModel.NotifyParentProperty(true)]
        [Description("存储匹配的控件值的ID号")]
        [TypeConverter(typeof(ValidatedControlConverter))]
        [DefaultValue("0")]
        public string MatchTextBoxValueID
        {
            get
            {
                string s = (string)ViewState["MatchTextBoxValueID"];
                return (s == null) ? "0" : s;

            }
            set
            {
                ViewState["MatchTextBoxValueID"] = value;
            }
        }

重写呈现控件的方法

 protected override void OnPreRender(EventArgs e)
        {
            if (Page.ClientScript.IsClientScriptBlockRegistered(this.GetType(), "IwoakTextBoxMatch") == false)
            {

                this.Page.ClientScript.RegisterClientScriptInclude(
           this.GetType(), "TextBoxMatch",
           Page.ClientScript.GetWebResourceUrl(this.GetType(),
           "Iwoak.Controls.TextBoxMatch.js"));
            }

            base.OnPreRender(e);
        }

 protected override void Render(HtmlTextWriter writer)

{
。。。。。。。。。。。。
}

再新建一个js
//****************
//可输可选可匹配输入的控件类
//参数（高，文本框的ID，隐藏控件的ID用于保存选择的ID值，图片的路径）
//****************
function TextMatch(Height, TextMatchText,TextMatchValue,imgurl)
{
    var TextMatchObject = this; 
 if(imgurl !="")
     TextMatchObject.img = imgurl; 
 
 var TextMatchDiv = document.createElement('div');
 var TextMatchFrame = document.createElement('iframe');
 var TextMatchButton = document.createElement('input');

TextMatchDiv.style.position = 'absolute';
TextMatchFrame.style.zIndex = '100';
 TextMatchFrame.src = 'javascript:void(0)';
设置TextMatchDiv,TextMatchButton ,TextMatchFrame ,的样式.......................

  //关闭选项层
 function hideTextMatch(e)
 {
  e = (e == null) ? window.event : e;
  target = (e.target) ? e.target : e.srcElement;
     TextMatchDiv.style.display = 'none';
   TextMatchFrame.style.display = 'none';
  
 }
//展开匹配层
 function showTextMatch()
{
。。。
}
//注册事件
xtMatchText.addEventListener('keyup', function(){showMatch()}, false);
  TextMatchButton.addEventListener('click', function(){showTextMatch()}, false);
  window.addEventListener('click', function(e){hideTextMatch(e)}, false);
}
基本上就完成了。
别人的更牛，选了之后输入框都可以有图片和链接的，不知道到他的“文本框”是用什么组合实现的。
放出他的效果图给大家瞧瞧。

我觉得这个效果可以，下个阶段目标就是要实现这个。有兴趣的朋友可以交流交流。