Posted in Javascript onDecember 27, 2013
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(); } /** * 文本框按下事件 */ 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鼠标按下事件 */ 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>
JSuggest自动匹配下拉框使用方法(示例代码)
声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@