How to Use JSuggest to automatically match the drop-down box (sample code) _ javascript tips-js tutorial

This article mainly introduces how to use JSuggest to automatically match the drop-down box. If you need it, please refer to it and hope to help you. 1.download jquery-latest.js, jsuggest.jsand jsuggest.css.

The source code of JSuggest. js is as follows:

The Code is as follows:

/**
*
* Description: JSuggest drop-down prompt box
*/

Function JSuggest (){

// DIV drop-down box
This. p = null;

// Ul under DIV
This. ul = null;

// Text input box
This. input = null;

// The LI object selected by the current DIV
This. current_li = null;

/**
* Hide the drop-down prompt box
*/
This. hide = function (){
This. p. style. visibility = "hidden ";
}

/**
* A drop-down box is displayed.
*/
This. show = function (){
This. p. style. visibility = "visible ";
}

/**
* Drop-down prompt box status
*/
This. status = function (){
If (this. p. style. visibility = "visible "){
Return true;
}
Return false;
}

/**
* Set the LI selected by the current DIV
*/
This. setCurrent_li = function (li, obj ){
Var co = obj. current_li;
If (co! = Null ){
Co. className = "";
}
Li. className = "li_index ";
Obj. current_li = li;
}

/**
* Initialize Suggest
*
* Input_id: ID of the input box
* DefHeight: the height of the drop-down prompt box (optional)
*/
This. init = function (input_id, defHeight ){
This. input = document. getElementById (input_id );
// This. input. autocomplete = "off ";
Var left = this. input. offsetLeft;
Var top = this. input. offsetTop;
Var width = this. input. offsetWidth;
Var height = this. input. offsetHeight;
Var p = this. input. offsetParent;
While (p! = Null ){
Left + = p. offsetLeft;
Top + = p. offsetTop;
P = p. offsetParent;
}
Top + = height;
If (defHeight = null | defHeight = 0 ){
Height = 150;
} Else {
Height = defHeight;
}
This. input. value = "";
Var obj = this;
This. input. onkeydown = function (evt ){
Obj. onkeydown (evt, obj );
}
This. p = document. createElement ("p ");
This. p. style. width = width + "px ";
This. p. style. height = height + "px ";
This. p. style. left = left + "px ";
This. p. style. top = top + "px ";
This. ul = document. createElement ("ul ");
This. p. appendChild (this. ul );
This. p. className = "jsuggest ";
Document. body. appendChild (this. p );
}

/**
* Remove all LI in UL under DIV
*/
This. remove = function (){
This. current_li = null;
While (this. removeLI ());
}

/**
* Remove LI from UL under DIV
*/
This. removeLI = function (){
Var node = this. ul. childNodes;
For (var n in node ){
If (node [n]! = Null & node [n]. nodeName = "LI "){
// Alert (node [n]. innerHTML );
This. ul. removeChild (node [n]);
Return true;
}
}
Return false;
}

/**
* Create LI in DIV
*/
This. create = function (items ){
This. remove ();

Var li_item = items. split (",");

For (var I in li_item ){
// Alert (li_item [I]);
Var li = document. createElement ("li ");
Li. innerHTML = li_item [I];

Var obj = this;
Li. onmousedown = function (){
Obj. onmousedown (this, obj );
}
Li. onmouseover = this. onmouseover;
Li. onmouseout = this. onmouseout;

This. ul. appendChild (li );
}
This. show ();
}

/**
* Text Box press event
*/
This. onkeydown = function (evt, obj ){
If (! Obj. status ()){
Return false;
}

If (! Evt & window. event)
{
Evt = window. event;
}

Var key = evt. keyCode;

// Var KEYUP = 38;
// Var KEYDOWN = 40;
// Var KEYENTER = 13;
Var ob = obj;
If (key = 38 ){
Obj. upKeySelected ();
} Else if (key = 40 ){
Obj. downKeySelected ();
} Else if (key = 13 | key = 27 ){
Obj. hide ();
}
}

This. getCurrentLiIndex = function (){
If (this. current_li = null ){
Return-1;
}
Var node = this. ul. childNodes;
For (var n in node ){
If (node [n]. nodeName = "LI "){
If (node [n] = this. current_li ){
Return n;
}
}
}
}

This. getLi = function (index ){
Var node = this. ul. childNodes;
For (var n in node ){
If (node [n]. nodeName = "LI" & n = index ){
This. setCurrent_li (node [n], this );
Return node [n];
}
}
}

This. upKeySelected = function (){
Var num = this. getCurrentLiIndex ();
If (num! =-1 & num> 0 ){
Num --;
Var node = this. getLi (num );
This. setCurrent_li (node, this );
This. input. value = node. innerHTML;
}
}

This. downKeySelected = function (obj ){
Var num = this. getCurrentLiIndex ();
If (num =-1 ){
Num = 0;
} Else {
Num ++;
If (num> = this. ul. childNodes. length) return false;
}
Var node = this. getLi (num );
This. setCurrent_li (node, this );
This. input. value = node. innerHTML;
}

/**
* DIV mouse pressing event
*/
This. onmousedown = function (thiz, obj ){
Obj. setCurrent_li (thiz, obj );
Obj. input. value = thiz. innerHTML;
Obj. hide ();
}

/**
* DIV mouse movement event
*/
This. onmouseover = function (){
If (this. className! = "Li_index "){
This. className = "li_check ";
}
}

/**
* DIV mouse removal event
*/
This. onmouseout = function (){
If (this. className = "li_check "){
This. className = "";
}
}

}

Var jsuggest = new JSuggest ();

2. jsp page

The Code is as follows: