Asp.net page text box prompt jscode (upgraded version)

Originally prepared to be directly modified in the previous article, but the editing function is too poor, open a bunch of HTML Code The space "& nbsp" is dazzling, so I have to open another article.

Upgrade Description: You have added settings for Multiple Functional prompts on one interface. You only need to modify the onfocus = "fnstartinterval (this, 'dropdownlist2 ')",

You can set the corresponding parameters and fix the problem that DIV in IE6 cannot cover the drop-down list, (in IE6, no matter how you set the select Z-index or the Z-index attribute of Div, it does not help.) in this case, an IFRAME is used to place the DIV at the position to be displayed, then, place the DIV above the IFRAME. It does not matter even if there is a select element below. The latest code is as follows:

Copy code The Code is as follows: <% @ page Language = "C #" autoeventwireup = "true" codefile = "autotemple. aspx. cs" inherits = "autotemple" %>
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

No title page

-->

// Obtain the value and display content of the drop-down list
Function getselectvalues (){
Getddlid ();
Values = new array ();
Texts = new array ();
Tempdiv = new array ();
Ddlvalue = Document. getelementbyid (ddlname );
For (VAR I = 0; I <ddlvalue. length; I ++ ){
Values [I] = ddlvalue. Options [I]. value;
Texts [I] = ddlvalue. Options [I]. text;
}
}

VaR ointerval = ""; // Save the automatic timer object
Function fnstartinterval (txt_id, ddloldname ){
Getddlname = ddloldname;
Getselectvalues ();
Objtxt = txt_id; // obtain the object of the input text box
Top = getlength ("offsettop", txt_id.id) + objtxt. offsetheight;
Left = getlength ("offsetleft", txt_id.id );
Width = objtxt. offsetWidth-2;
Ointerval = Window. setinterval ("beginsearch ()", 2000); // enable timing
}

// Obtain the length of the corresponding attribute
Function getlength (attribute, ID)
{
VaR offset = 0;
VaR item = Document. getelementbyid (ID );
While (item)
{
Offset + = item [attribute];
Item = item. offsetparent;
}
Return offset;
}

// Stop timing
Function fnstopinterval ()
{
Window. clearinterval (ointerval );
}

// Automatic completion prompt
Function beginsearch (){
If (objtxt. value. length> 0 & tempvalue! = Objtxt. value)
{
Sumsearchcount = 0;
Tempvalue = objtxt. value;
VaR iframe_show = Document. getelementbyid ("coverddl ");
VaR div_value = Document. getelementbyid ("divmsg ");
Iframe_show.style.display = "Block ";
Div_value.style.top = Top + "PX ";
Div_value.style.display = "Block ";
Div_value.style.left = left + "PX ";
Div_value.style.width = width + "PX ";
Div_value.innerhtml = "";
VaR Leng = texts. length;
VaR txt_value = objtxt. value;
VaR ROW = "";
For (VAR I = 0; I <Leng; I ++ ){
If (texts [I]. indexof (txt_value )! =-1 ){
Row = row + "<Div style = 'font-size:" + fontsize + "PX; display: block; padding-top: 2px; padding-bottom: "+ paddingbottom +" PX; width: 100% 'id = 'divsearch _ "+ I +" 'onmouseover = \ "this. style. backgroundcolor = '"+ backgroundcolor +"'; currentindex = "+ I +"; \ "onmouseout = \" this. style. backgroundcolor = ''; currentindex =-1; \" onclick = \ "span_click (this) \"> "+ texts [I] +" </div> ";
Tempdiv [sumsearchcount] = I;
Sumsearchcount ++;
}
}
Div_value.innerhtml = row;
}
Else if (objtxt. value. Length = 0 | objtxt. value = NULL)
{
Document. getelementbyid ("coverddl"). style. Display = "NONE ";
Document. getelementbyid ("divmsg"). innerhtml = "";
}
}

// Click Save to text box for the prompt content
Function span_click (SP)
{
Clear ();
Objtxt. value = sp. innerhtml;
Document. getelementbyid (ddlname ). options [Sp. id. substring (sp. id. indexof ('_') + 1, SP. id. length)]. selected = "selected ";
Document. getelementbyid (ddlname). fireevent ("onchange ");
}

// Stop the query and close the prompt
Function closesearch ()
{
VaR TBL = Document. activeelement. parentelement;
If (TBL & TBL. ID! = "Divmsg") // prevents missing prompts after the upper/lower keys are used
{
Clear ();
Document. getelementbyid ("divmsg"). innerhtml = "";
}
Else if (currentindex =-1)
{
Clear ();
Document. getelementbyid ("divmsg"). innerhtml = "";
}
}

// Empty prompt
Function clear ()
{
Fnstopinterval ();
Values = NULL;
Texts = NULL;
Tempdiv = NULL;
Currentindex =-1;
Tempvalue = "";
Document. getelementbyid ("coverddl"). style. Display = "NONE ";
Document. getelementbyid ("divmsg"). style. Display = "NONE ";
}

// Use the keyboard's up and down arrow keys and enter keys
Function changeselect ()
{
VaR iframecontent = Document. getelementbyid ("coverddl ");
If (iframecontent & iframecontent. style. Display = "Block ")
{
If (event. keycode = 38 | event. keycode = 40 | event. keycode = 13)
{

If (currentindex! =-1) document. getelementbyid ("divsearch _" + tempdiv [currentindex]). style. backgroundcolor = "";
If (event. keycode = 38 & currentindex> 0)
{< br> currentindex --;
document. getelementbyid ("divsearch _" + tempdiv [currentindex]). style. backgroundcolor = "# 3366cc";
}< br> else if (event. keycode = 40 & currentindex {< br> currentindex ++;
document. getelementbyid ("divsearch _" + tempdiv [currentindex]). style. backgroundcolor = "# 3366cc";
}< br> else if (event. keycode = 13)
{< br> If (currentindex>-1)
{< br> var divpart = document. getelementbyid ("divsearch _" + tempdiv [currentindex]);
objtxt. value = divpart. innerhtml;
document. getelementbyid (ddlname ). options [tempdiv [currentindex]. selected = "selected";
clear ();
// document. getelementbyid (ddlname ). fireevent ("onchange");
// document. form1.onsubmit = function () {return false ;};
}< BR >}

// -->

typename = "testdal">

&lt;/P&gt;

</Iframe>
<Div style = "Z-index: 3; display: none; text-align: Left; position: absolute; Border: solid 1px;" style = "Z-index: 3; display: none; text-align: Left; position: absolute; Border: solid 1px; "id =" divmsg ">
</Div>
<Div>
<Input type = "text" id = "txttwo" runat = "server" AutoComplete = "off" onkeydown = "changeselect ()" onfocus = "fnstartinterval (this, 'dropdownlist2 ') "onblur =" closesearch () "/> <br/>
<Asp: dropdownlist id = "dropdownlist2" datatextfield = "slr_name" datavaluefield = "systemloginrecord_id" runat = "server" performanceid = "objectperformance1">
</ASP: dropdownlist>
</Div>
</Form>
</Body>

</Html>