可编辑下拉框，ComboBox asp.net控件

好久没更新了，发个有意思的，可编辑dropdownlist 控件，感觉自己写的挺牛的呵呵。跟大家共享下

代码

     public   class  ComboBox:System.Web.UI.WebControls.CompositeControl
    {

         private  TextBox input;
         private  DropDownList select;

         public  TextBox TextBox {

             get  {  this .EnsureChildControls();  return  input; }
        }

         public  DropDownList DropDownList {

             get  {  this .EnsureChildControls();  return  select; }
        }



         protected   override   void  CreateChildControls()
        {
             // base.CreateChildControls();

             this .Controls.Clear();
            input  =   new  TextBox();
            input.ID  =   " input " ;

            select  =   new  DropDownList();
            select.ID  =    " select " ;

             this .Controls.Add(select);
             this .Controls.Add(input);
             this .ChildControlsCreated  =   true ;
        }
         protected   override   void  RenderContents(System.Web.UI.HtmlTextWriter writer)
        {
             this .EnsureChildControls();

   //            <select id="test1" style="width:100px;height:20px;">
   // <option>中国</option>
   // <option>aaaaa</option>
   // <option>ccccc</option>
   // <option>香港</option>
   // </select>  
   // <div style="width:80px; height:20px; position:absolute;" >
   // <iframe frameborder="0" style="width:100%; height:100%;"></iframe>
   // <input type="text" style="width:78px;height:17px;position:absolute; padding:0;" />
   // </div>
            select.Width  =   100 ;
            select.Height  =   20 ;
            select.RenderControl(writer);
             // div
            writer.AddStyleAttribute( " width " ,  " 80px " );
            writer.AddStyleAttribute( " height " ,  " 20px " );
            writer.AddStyleAttribute( " position " ,  " absolute " );
            writer.RenderBeginTag(HtmlTextWriterTag.Div);
             // iframe
            writer.AddStyleAttribute( " width " ,  " 100% " );
            writer.AddStyleAttribute( " height " ,  " 100% " );
            writer.AddAttribute( " frameborder " ,  " 0 " );
            writer.RenderBeginTag(HtmlTextWriterTag.Iframe);
            writer.RenderEndTag();
             // input
            input.Width  =   78 ;
            input.Height  =   15 ;
            input.Style.Add(HtmlTextWriterStyle.Position,  " absolute " );
            input.RenderControl(writer);
             // end div
            writer.RenderEndTag();

     //             <script  type="text/javascript">
     //     $(function () {
     //         var select = $('#test1');
     //         var offset = select.offset();
     //         select.change(function () { $(this).next().find('input').val($(this).val()); })
     //         .next().css({ left: offset.left, top: offset.top, zindex: 1000 })
     //         .find('input').css({ left: 0, top: 0, zindex: 1001 });
     //     })
     // </script>
            writer.AddAttribute( " type " ,  " text/javascript " );
            writer.RenderBeginTag(HtmlTextWriterTag.Script);
            writer.Write( " $(function () {var select = $('# "   +   this .ID  +   " _ "   +   this .select.ID  +   " '); var offset = select.offset(); " );
            writer.Write( " select.change(function () { $(this).next().find('input').val($(this).find(':selected').text()); }) " );
            writer.Write( " .next().css({ left: offset.left, top: offset.top, zindex: 1000 }) " );
            writer.Write( " .find('input').css({ left: 0, top: 0, zindex: 1001 });}) " );
            writer.RenderEndTag();
        
            


        }

    }

 实现方法比较简单，用的是组合控件。里面包着TextBox和DropDownList。技巧在于客户端。使用js和css将input正好定位到下拉框上面，遮住下拉框的显示区域，只留下下箭头区域。ie6下还得使用iframe来遮挡select.经测试在ie6先显示完美。ie8,获取显示有点小问题。仔细校对下可以修改过了，主要原因在于不同浏览器select下拉框的下箭头区域大小不一致。

 

 

使用时候也比较简单，直接操作控件的DropDownList属性和TextBox属性即可。

 

 

代码

            ComboBox1.DropDownList.DataSource  =   new  List < object > () {  new  { Text  =   " 111 " , value  =   1  },  new  { Text  =   " 222 " , value  =   2  } };
            ComboBox1.DropDownList.DataTextField  =   " Text " ;
            ComboBox1.DropDownList.DataValueField  =   " Value " ;
            ComboBox1.DropDownList.DataBind();