Editable drop-down box, ComboBox Asp.net Control

I haven't updated it for a long time. I am sending an interesting one. I can edit the dropdownlist control. I feel like I write it myself. Share with you

Code Public   Class ComboBox: system. Web. UI. webcontrols. compositecontrol
{

PrivateTextbox input;
PrivateDropdownlist select;

PublicTextbox {

Get{This. Ensurechildcontrols ();ReturnInput ;}
}

PublicDropdownlist {

Get{This. Ensurechildcontrols ();ReturnSelect ;}
}

Protected   Override   Void Createchildcontrols ()
{
// Base. createchildcontrols ();

This . Controls. Clear ();
Input =   New Textbox ();
Input. ID =   " Input " ;

Select= NewDropdownlist ();
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> China </option>
// <Option> AAAAA </option>
// <Option> CCCCC </option>
// <Option> Hong Kong </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 ();

}

}

The implementation method is relatively simple, and a composite control is used. It contains textbox and dropdownlist. The skill lies in the client. Use JS and CSS to position the input to the drop-down box, hide the display area of the drop-down box, and leave only the down arrow area. In IE6, IFRAME must be used to block select. It is tested to be perfect in IE6. IE8, it is a little problem to obtain the display. The main reason is that the sizes of the lower arrow areas in the select drop-down box of different browsers are inconsistent.

 

 

It is easy to use. You can directly operate the dropdownlist and textbox attributes of the control.

 

 

Code 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 ();