JSuggest自动匹配下拉框使用方法(示例代码)

1.下载jquery-latest.js，JSuggest.js和JSuggest.css

JSuggest.js源代码如下
代码如下:
/**
*
* Description : JSuggest 下拉提示框
*/

function JSuggest(){

// DIV下拉框
this.div = null;

// DIV下的ul
this.ul = null;

// 文本输入框
this.input = null;

// 当前DIV所选的LI对象
this.current_li = null;

/**
* 隐藏下拉提示框
*/
this.hide = function(){
this.div.style.visibility = "hidden";
}

/**
* 显示下拉提示框
*/
this.show = function(){
this.div.style.visibility = "visible";
}

/**
* 下拉提示框状态
*/
this.status = function(){
if (this.div.style.visibility == "visible"){
return true;
}
return false;
}

/**
* 设置当前DIV所选的LI
*/
this.setCurrent_li = function(li, obj){
var co = obj.current_li;
if (co != null){
co.className = "";
}
li.className = "li_index";
obj.current_li = li;
}

/**
* 初始化Suggest
*
* input_id : 输入框的ID
* defHeight: 下拉提示框的高（不提供也可以）
*/
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.div = document.createElement("div");
this.div.style.width = width + "px";
this.div.style.height = height + "px";
this.div.style.left = left + "px";
this.div.style.top = top + "px";
this.ul = document.createElement("ul");
this.div.appendChild(this.ul);
this.div.className = "jsuggest";
document.body.appendChild(this.div);
}

/**
* 移除DIV下UL中所有的LI
*/
this.remove = function(){
this.current_li = null;
while(this.removeLI());
}

/**
* 移除DIV下UL中的LI
*/
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;
}

/**
* 在DIV中创建LI
*/
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();