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
!= null && node
.nodeName == "LI"){

// alert(node
.innerHTML);

this.ul.removeChild(node
);

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();

}

/**

* 文本框按下事件

*/

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
.nodeName == "LI"){

if(node
== this.current_li){

return n;

}

}

}

}

this.getLi = function(index){

var node = this.ul.childNodes;

for(var n in node){

if (node
.nodeName == "LI" && n == index){

this.setCurrent_li(node
, this);

return node
;

}

}

}

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鼠标按下事件

*/

this.onmousedown = function(thiz, obj){

obj.setCurrent_li(thiz, obj);

obj.input.value = thiz.innerHTML;

obj.hide();

}

/**

* DIV鼠标移动事件

*/

this.onmouseover = function(){

if (this.className != "li_index"){

this.className = "li_check";

}

}

/**

* DIV鼠标移出事件

*/

this.onmouseout = function(){

if (this.className == "li_check"){

this.className = "";

}

}

}

var jsuggest = new JSuggest();

 

2.jsp页面

 

<input id="text" name="text" type="text"  onkeyup="go(event, this.value);"/>

<script type="text/javascript">   

   

 j(document).ready(function(){

  // 初始化JSUGGEST

  jsuggest.init("text");

  //或者用下面的方法，设置下拉框高度

  //jsuggest.init("text",200);

 })

 

 

 function go(event, value){

     event= event ? event : (window.event ? window.event : arguments[0]);

     var url = "url?suggestInput="+encodeURIComponent(value);//url是具体的action或jsp地址等，返回值是以逗号分隔的字符串

  goSuggestInput(event,url,value);

 }

 

function goSuggestInput(evnet,url,value){

        if (value == ""){

         // 如果输入框为空隐藏下拉框

         jsuggest.hide();

      return false;   

        }

   

     // 确保evt是一个有效的事件  

  if (!evnet && window.event)

  {

   evnet = window.event;

  }

  var key = evnet.keyCode;

  if (key == 38 || key == 40 || key == 13 || key == 27){

   return false;

  }

  

  j.ajax({

   type: "post",

         url:url,

   dataType: "text",

   cache: "false",

   

   beforeSend: function(XMLHttpRequest){

   },

   success: function(data, textStatus){

    // 对下拉框添加数据

    jsuggest.create(data);

    

   },

   complete: function(XMLHttpRequest, textStatus){

  

   },

   error: function(){

    alert("对不起,服务器忙!");

   }

  });

 }

</script>