Nice-looking drop-down box

/*
* ComboBox
* By Jared nuzzolillo
*
* Updated by Erik Arvidsson
* Http://webfx.eae.net/contact.html#erik
* 2002-06-13 fixed Mozilla support and improved build Performance
*
*/

Global_run_event_hook = true;
Global_combo_array = new array ();

Array. Prototype. Remove = function (dx)
{
If (isnan (dx) | DX> This. Length) {self. Status = 'array _ remove: Invalid request-'+ dx; return false}
For (VAR I = 0, n = 0; I <this. length; I ++)
{
If (this [I]! = This [dx])
{
This [n ++] = This [I]
}
}
This. Length-= 1
}

Function combobox_make ()
{
VaR BT, nm;
Nm = This. Name + "TXT ";

This.txt view = Document. createelement ("input ")
This.txt view. type = "text ";
This.txt view. Name = Nm;
This.txt view. ID = Nm;
This.txt view. classname = "combo-input"
This.view.appendchild(this.txt view );

This. valcon = Document. createelement ("input ");
This. valcon. type = "hidden ";
This. View. appendchild (this. valcon)

VaR TMP = Document. createelement ("IMG ");
TMP. src = "___";
TMP. style. width = "1px ";
TMP. style. Height = "0 ";
This. View. appendchild (TMP );

VaR TMP = Document. createelement ("button ");
TMP. appendchild (document. createtextnode (6 ));
TMP. classname = "combo-button ";

This. View. appendchild (TMP );
TMP. onfocus = function () {This. Blur ();};
TMP. onclick = new function ("", this. Name + ". Toggle ()");
}

Function combobox_choose (realval, txtval)
{
This. value = realval;
VaR samstring = This. Name + ". View. childnodes [0]. value = '" + txtval + "'"
Window. setTimeout (samstring, 1)
This. valcon. value = realval;
}

Function combobox_mousedown (E)
{
VaR OBJ, Len, El, I;
El = e.tar get? E.tar get: E. srcelement;
While (El. nodetype! = 1) El = El. parentnode;
VaR elcl = El. classname;
If (elcl. indexof ("combo -")! = 0)
{

Len = global_combo_array.length
For (I = 0; I <Len; I ++)
{

Curobj = global_combo_array [I]

If (curobj. opslist)
{
Curobj. opslist. style. Display = 'none'
}
}
}
}

Function combobox_handlekey (E)
{
Var key, OBJ, eobj, El, strname;
Eobj = E;
Key = eobj. keycode;
El = e.tar get? E.tar get: E. srcelement;
While (El. nodetype! = 1) El = El. parentnode;
Elcl = El. classname
If (elcl. indexof ("combo-") = 0)
{
If (elcl. Split ("-") [1] = "input ")
{
Strname = El. Id. Split ("TXT") [0]
OBJ = Window [strname];

OBJ. expops. Length = 0
OBJ. Update ();
OBJ. Build (obj. expops );
If (obj. expops. Length = 1 & obj. expops [0]. Text = "(no matches)") {}// empty
Else {obj. opslist. style. Display = 'block ';}
OBJ. value = El. value;
OBJ. valcon. value = El. value;
}
}
}

Function combobox_update ()
{
VaR opart, astr, Alen, opln, I, boo;
Boo = false;
Opln = This. Options. Length
Astr = this.txt view. value. tolowercase ();
Alen = astr. Length
If (Alen = 0)
{
For (I = 0; I <opln; I ++)
{
This. expops [This. expops. Length] = This. Options [I]; boo = true;
}
}
Else
{
For (I = 0; I <opln; I ++)
{
Opart = This. Options [I]. Text. tolowercase (). substring (0, Alen)
If (astr = opart)
{
This. expops [This. expops. Length] = This. Options [I]; boo = true;
}
}
}
If (! Boo) {This. expops [0] = new comboboxitem ("(no matches )","")}
}

Function combobox_remove (INDEX)
{
This. Options. Remove (INDEX)
}

Function combobox_add ()
{
VaR I, arglen;
Arglen = arguments. Length
For (I = 0; I <arglen; I ++)
{
This. Options [This. Options. Length] = arguments [I]
}
}

Function combobox_build (ARR)
{
VaR STR, arrlen
Arrlen = arr. length;
STR = '<Table class = "combo-list-width" cellpadding = 0 cellspacing = 0> ';
VaR STRs = new array (arrlen );
For (VAR I = 0; I <arrlen; I ++)
{
STRs [I] = '<tr>' +
'<TD class = "combo-item" onclick = "' + this. name + '. choose (\ ''+ arr [I]. value + '\', \ ''+ arr [I]. text + '\'); '+ this. name + '. opslist. style. display = \ 'None \ '; "' +
'Onmouseover = "this. classname = \ 'combo-hilite \ '; "onmouseout =" this. classname = \ 'combo-item \ '"> & nbsp;' + arr [I]. text + '& nbsp; </TD>' +
'</Tr> ';
}
STR = STR + STRs. Join ("") + '</table>'

If (this. opslist) {This. View. removechild (this. opslist );}

This. opslist = Document. createelement ("Div ")
This. opslist. innerhtml = STR;
This. opslist. style. Display = 'none ';
This. opslist. classname = "combo-list ";
This. opslist. onselectstart = returnfalse;
This. View. appendchild (this. opslist );
}

Function combobox_toggle ()
{
If (this. opslist)
{
If (this. opslist. style. Display = "Block ")
{
This. opslist. style. Display = "NONE"
}
Else
{
This. Update ();
This. Build (this. Options );
This. View. style. zindex = ++ ComboBox. Prototype. comboboxzindex
This. opslist. style. Display = "Block"
}
}
Else
{
This. Update ();
This. Build (this. Options );
This. View. style. zindex = ++ ComboBox. Prototype. comboboxzindex
This. opslist. style. Display = "Block"
}
}

Function ComboBox ()
{
If (arguments. Length = 0)
{
Self. Status = "ComboBox invalid-No name Arg"
}

This. Name = arguments [0];
This. Par = arguments [1] | document. Body
This. view = Document. createelement ("Div ");
This. View. style. Position = 'absolute ';
This. Options = new array ();
This. expops = new array ();
This. value = ""

This. Build = combobox_build
This. Make = combobox_make;
This. Choose = combobox_choose;
This. Add = combobox_add;
This. Toggle = combobox_toggle;
This. Update = combobox_update;
This. Remove = combobox_remove;

This. Make ()
This.txt view = This. View. childnodes [0]
This. valcon = This. View. childnodes [1]

This. par. appendchild (this. View)

Global_combo_array [global_combo_array.length] = this;
If (global_run_event_hook) {combobox_init ()}
}

ComboBox. Prototype. comboboxzindex = 1000 // change this if you must

Function combobox_init ()
{
If (document. addeventlistener ){
Document. addeventlistener ("keyup", combobox_handlekey, false );
Document. addeventlistener ("mousedown", combobox_mousedown, false );
}
Else if (document. attachevent ){
Document. attachevent ("onkeyup", function () {combobox_handlekey (window. Event );});
Document. attachevent ("onmousedown", function () {combobox_mousedown (window. Event );});
}
 
Global_run_event_hook = false;
}

Function returnfalse () {return false}

Function comboboxitem (text, value)
{
This. Text = text;
This. value = value;
}

Document. Write ('<LINK rel = "stylesheet" type = "text/CSS" href = "combobox.css"> ')

 

 

 

========================================================== ==================================
<HTML>
<Head>
<Title> ComboBox demo </title>

<Style>
Body {font-size: 9pt; font-family: verdana ;}
Button {cursor: hand; Border: 1px solid black; font-family: Arial; font-size: 9pt ;}
A {color: red ;}
A: hover {color: Blue}
</Style>

</Head>

<Body>
<SCRIPT src = "ComboBox. js"> </SCRIPT>

<SCRIPT>

Dm = new ComboBox ("dm ")

DM. Add (
New comboboxitem ("barge", 1 ),
New comboboxitem ("benluc", 2 ),
New comboboxitem ("benlieeeeck", 3 ),
New comboboxitem ("taco", 4)
)
/*
// Generate 1000 more to test performance
For (VAR I = 0; I <100; I ++)
DM. Add (New comboboxitem (string (I )));
*/

</SCRIPT>

<Br>

show value & nbsp; onclick =" DM. add (New comboboxitem (window. prompt ('Type in the text to add', ''), window. prompt ('Type in a value to add', '')"
Add item & nbsp; remove item