asp.net page version text box Smart tips Jscode (Upgrade) _ Practical Tips

Originally prepared in the previous article directly modified, helpless editing function is too bad, open a heap of HTML code, space "" All see the people dazzled, had to open another.

Upgrade Instructions: Add a set of multiple function hints for an interface, just modify the text box onfocus= "Fnstartinterval (This, ' DropDownList2 ')",

Set the appropriate parameters, while fixing the IE6 under the Div can not cover the Drop-down list of problems, (IE6 regardless of the set of select Z-index or div z-index properties are useless), about this is the use of an IFRAME, Cover the div where you want it to appear, and then place the div above the IFRAME. Even if there is a SELECT element below, it doesn't matter. Here is the latest code:

Copy Code code 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 ">

<title> Untitled Page </title>
<style type= "Text/css" ><!--
#coverddl {
Position:absolute;
Z-index:2;
Width:expression (This.nextSibling.offsetWidth);
Height:expression (This.nextSibling.offsetHeight);
Top:expression (THIS.NEXTSIBLING.OFFSETTOP);
Left:expression (This.nextSibling.offsetLeft);
}

--></style>
<script type= "Text/javascript" language= "JavaScript" ><!--
var currentindex=-1;//save the index selected in the Prompt box
var sumsearchcount=0;//save the number of data in the prompt box
var tempvalue= "";//Save the current input to search for
var objtxt=null;//Save text Box object
Top of the Var top=0;//prompt box
Left of the Var left=0;//prompt box
Width of the var width=0;//prompt box
var values = null;//Saves the value of the Drop-down list
var texts = null;//Save the display of the Drop-down list
var tempdiv= null;//Save the index corresponding to the values in the prompt box
The Drop-down list ID obtained by Var ddlname= "";//
var getddlname = "";//server-side Drop-down list ID
var fontsize=12;//smart Prompt Content font
var paddingbottom = 2;//Smart tip content bottom edge size
var backgroundcolor = "#3366CC";//Smart prompt content background color
Get Drop-down List ID
function Getddlid ()
{
var DDLs = document.getElementsByTagName ("select");
for (Var i=0;i<ddls.length;i++)
{
if (Ddls[i].id.indexof (getddlname)!=-1)
{
Ddlname=ddls[i].id;
Break
}
}
}

Get the value and display of a 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 Automatic Timer Object
function Fnstartinterval (txt_id,ddloldname) {
Getddlname=ddloldname;
Getselectvalues ();
objtxt=txt_id;//Gets the input text box object
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
}

Gets the length of the corresponding property
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);
}

Auto 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=" + "; \" 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= "";
}
}

Prompt content Click Save to text box
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 query, close prompt
function Closesearch ()
{
var tbl = document.activeElement.parentElement;
if (tbl && tbl.id!= "divmsg")//prevent loss of prompt after using the up and down keys
{
Clear ();
document.getElementById ("Divmsg"). innerhtml= "";
}
else if (currentindex==-1)
{
Clear ();
document.getElementById ("Divmsg"). innerhtml= "";
}
}

Empty tips
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 up and DOWN ARROW keys and enter keys
function Changeselect ()
{
var iframecontent = document.getElementById ("Coverddl");
if (iframecontent && iframecontent.style.display== "block")
{
if (Event.keycode = = | | event.keycode = = | | event.keycode = 13)
{

if (currentindex!=-1) document.getElementById ("Divsearch_" +tempdiv[currentindex)). style.backgroundcolor= "";
if (Event.keycode = = && currentindex > 0)
{
currentindex--;
document.getElementById ("Divsearch_" +tempdiv[currentindex]). style.backgroundcolor= "#3366CC";
}
else if (Event.keycode = = && Currentindex < sumSearchCount-1)
{
currentindex++;
document.getElementById ("Divsearch_" +tempdiv[currentindex]). style.backgroundcolor= "#3366CC";
}
else if (Event.keycode = 13)
{
if (Currentindex >-1)
{
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;};
}
}
}
}
}


--></script>
<body>
<form id= "Form1" runat= "Server" >
<div>
<input type= "text" id= "Txtsearch" autocomplete= "Off" onkeydown= "Changeselect ()" onfocus= "Fnstartinterval (This, ' DropDownList1 ') "onblur=" Closesearch () "/>
<asp:dropdownlist id= "DropDownList1" runat= "datatextfield=" Slr_realname "datavaluefield=" systemloginrecord_id "datasourceid=" ObjectDataSource1 "width=" 130px "onselectedindexchanged=" dropdownlist1_ SelectedIndexChanged ">
</asp:dropdownlist><asp:objectdatasource id= "ObjectDataSource1" runat= "Server" selectmethod= "Getrecordds" "
Typename= "Testdal" ></asp:ObjectDataSource>
</div>
<iframe id= "Coverddl" style= "Position:absolute; Z-index:2; Display:none; "Style=" Position:absolute; Z-index:2; Display:none; ">

</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" Server "datasourceid=" ObjectDataSource1 >
</asp:DropDownList>
</div>
</form>
</body>