Drop-down box that can be entered and automatically matched

Style. CSS

. Ac_menu {border: 1px solid #4242a6; Background-color: # f6f6f6; Z-index: 99; cursor: default; overflow: hidden;-moz-box-sizing: border-box; Height: expression (this. scrollheight> 130 )? "130px": "Auto ")}
. Ac_menuitem {width: 100%; color: #141414; padding: 2px; cursor: pointer; cursor: default ;}
. Ac_menuitem_selected {background-color: # d6deec; width: 100%; color: #141414; padding: 2px; cursor: default ;}

Main. js

<! -- ComboBox -->
Function ComboBox (sobj, al_v, Al_T)
{

VaR rmopo = Window. createpopup ();

Function RM (I, Oct, H)
{
VaR I2 = eval (I );
VaR Oct = eval (OCT );
VaR W = eval (I). offsetwidth;
VaR H = eval (h );
VaR Lefter = i2.offsetleft-1; var topper = i2.offsetheight;
Rmopo.doc ument. Body. innerhtml = Oct. innerhtml;
Rmopo.doc ument. Body. style. Border = "1px solid #1122a6 ";
Rmopo.doc ument. Body. style. Background = "# f6f6f6 ";
Rmopo. Show (Lefter, Topper, W, H, I2 );
}

Loadcombobox (sobj, al_v, Al_T );

Function loadcombobox (OBJ, al_v, Al_T)
{
VaR OBJ = eval (OBJ)
Thelistarrayv = al_v;
Thelistarrayt = Al_T;

var tempstr = '

'
+'

'
for (VAR I = 0; I tempstr + = '

' + htmlencode (thelistarrayt [I]) + '

';
tempstr + = '

';

OBJ. insertadjacenthtml ("afterend", tempstr );
OBJ. onfocus = ac_onfocus;
OBJ. onclick = ac_onfocus;
OBJ. onblur = ac_onblur;
OBJ. onkeydown = ac_onkeydown;
OBJ. AutoComplete = "off ";
OBJ. onpropertychange = ac_onpropertychange;
}

Function ac_onfocus (OBJ)
{
If (OBJ = NULL) OBJ = event. srcelement;
Popmenu = eval (obj. ID + "showcombox ");
Rm (OBJ, popm, 130 );
Ac_onpropertychange (OBJ );
}

Function ac_onblur (OBJ)
{
Rmopo. Hide ();
}

Function ac_onpropertychange (OBJ)
{
If (OBJ = NULL) OBJ = event. srcelement;

VaR DV = eval ("rmopo.doc ument. All ['" + obj. ID + "listdiv']");
Thelistdiv = dv
If (thelistdiv = NULL) return;
VaR thelistdivchildren = thelistdiv. Children;

Thelistdiv. selectedindex =-1;
VaR thefirstvisibleindex =-1;

VaR objvalue = obj. value;

For (VAR I = 0; I <thelistdivchildren. length; I ++)
{
If (thelistdiv. Children [I]. textvalue. indexof (objvalue) = 0)
{
If (thefirstvisibleindex =-1) thefirstvisibleindex = I;
Thelistdivchildren [I]. style. backgroundcolor = "# f6f6f6 ";
Thelistdivchildren [I]. style. Display = "";
}
Else
Thelistdivchildren [I]. style. Display = "NONE ";
If (thelistdiv. selectedindex =-1 & thelistdiv. Children [I]. textvalue = objvalue)
{
Thelistdiv. selectedindex = I;
}
}
If (thelistdiv. selectedindex =-1 & thefirstvisibleindex! =-1)
{
Thelistdiv. selectedindex = thefirstvisibleindex;
}
If (thelistdiv. selectedindex! =-1)
{
Thelistdiv. Children [thelistdiv. selectedindex]. style. backgroundcolor = "# d6deec ";
}
Adjustlistdivscroll (OBJ );
}

Function ac_onkeydown (OBJ)
{
If (OBJ = NULL) OBJ = event. srcelement;

VaR ac_tab = 9;
VaR ac_enter = 13;
VaR ac_up_arrow = 38;
VaR ac_down_arrow = 40;

VaR DV = eval ("rmopo.doc ument. All ['" + obj. ID + "listdiv']");
Thelistdiv = dv
If (thelistdiv = NULL) return;

VaR keycode = event. keycode;
If (keycode = ac_enter) keycode = event. keycode = ac_tab;

If (keycode = ac_tab & thelistdiv. selectedindex! =-1)
{
OBJ. value = thelistdiv. Children [thelistdiv. selectedindex]. value;
Rmopo. Hide ();
}

If (keycode = ac_up_arrow & thelistdiv. selectedindex! =-1)
{
For (VAR I = thelistdiv. selectedIndex-1; I>-1; I --)
{
If (thelistdiv. Children [I]. style. display! = "NONE ")
{
Thelistdiv. Children [thelistdiv. selectedindex]. style. backgroundcolor = "# f6f6f6 ";
Thelistdiv. selectedindex = I;
Thelistdiv. Children [thelistdiv. selectedindex]. style. backgroundcolor = "# d6deec ";
Adjustlistdivscroll (OBJ );
Break;
}
}
}

If (keycode = ac_down_arrow & thelistdiv. selectedindex! =-1)
{
For (VAR I = thelistdiv. selectedindex * 1 + 1; I <thelistdiv. Children. length; I ++)
{
If (thelistdiv. Children [I]. style. display! = "NONE ")
{
Thelistdiv. Children [thelistdiv. selectedindex]. style. backgroundcolor = "# f6f6f6 ";
Thelistdiv. selectedindex = I;
Thelistdiv. Children [thelistdiv. selectedindex]. style. backgroundcolor = "# d6deec ";
Adjustlistdivscroll (OBJ );
Break;
}
}
Return;
}

}

Function adjustlistdivscroll (OBJ)
{
If (OBJ = NULL) OBJ = event. srcelement;

VaR DV = eval ("rmopo.doc ument. All ['" + obj. ID + "listdiv']");
Thelistdiv = dv

If (thelistdiv = NULL | thelistdiv. selectedindex =-1) return;
VaR I = thelistdiv. selectedindex;
If (thelistdiv. Children [I]. offsettop <thelistdiv. scrolltop) | (thelistdiv. Children [I]. offsettop> thelistdiv. scrolltop + 120 ))
Thelistdiv. scrolltop = thelistdiv. Children [I]. offsetTop-85;
}

Function htmlencode (STR)
{
If (STR = NULL) Return "";
STR = Str. Replace (/</ig, "& lt ;")
STR = Str. Replace (/>/ig, "& gt ;");
STR = Str. Replace (/"/ig," & quot ;");
Return STR;
}
}
<! -- End -->

ComboBox. htm

<HTML>
<Head>
<Link type = "text/CSS" rel = "stylesheet" href = ".../style.css">
<Script language = "JavaScript" src = ".../Main. js"> </SCRIPT>
</Head>
<Body>

pid:
PID b:
select:

<SCRIPT>
VaR lat = ["001001 product 1", "001002 product 1 2", "001011 product 1 3", "001012 product 1 4 ", "001021 product 1 5", "001022 product 1 6", "001023 product 1 7 ",
"002031 product 2," 002032 product 2, "002041 product 2, 3", "002042 product 2, 4", "002043 product 2, 5 ", "002051 product 2-6", "002052 product 2-7 ",
"003000 product 3", "003001 product 3 2", "003101 product 3 3 3", "003102 product 3 4", "003201 product 3 5 ", "003202 product 3-6", "003216 product 3-7"];
VaR LAV = ["Product 1", "Product 1 2", "Product 1 3", "Product 1 4", "Product 1 5 ", "product one 6", "product one 7 ",
"Product 2", "product 2 2 2", "product 2 3", "product 2 4", "product 2 5", "product 2 6 ", "7 of product 2 ",
"Product 3", "Product 3 2", "Product 3 3 3", "Product 3 4", "Product 3 5", "Product 3 6 ", "Product 3-7"];
ComboBox (document. All. ccfield, Lat, Lat );
ComboBox (document. All. TTField, LAV, Lat );
</SCRIPT>
</Body>
</Html>

The effect is as follows:

Figure 1:

Figure 2:

Figure 3:

 

Welcome to discuss and optimize it!

Please indicate the source and author for reprinting. Please contact us via email if you are using optimization, so that you may learn from us occasionally. Thank you!

Trackback: http://tb.blog.csdn.net/TrackBack.aspx? Postid = 504814