文本框在当用户输入时,常常需要把相近的信息提示给用户,以方便用户选择。
总体的思路是:
在txt文本框的onkeyup事件中,发送ajax请求,到数据库去取相似的记录,把得到的结果构成字符串传到前台,再在前台里拆分来按要求显示。
ajax请求到后台取数据的代码忽略,只取js前台的代码:
var eventElement; function inputSuggest() { eventElement = event.srcElement || event.target; var eventEleValue = eventElement.value; if(eventEleValue){ var url = urlPrefix + "/jsp/vou_record_mgr/getLinkBrandAndModel.do"; pars = "EventEleValue="+encodeURIComponent(encodeURIComponent(eventEleValue)); new Ajax.Request( url, { parameters: pars, method:"get", onCreate:function(){ }, onComplete:function(originalRequest){ //alert(originalRequest.responseText); if(originalRequest.responseText.indexOf("#")==-1){ if($("reslut_div")) { $("reslut_div").innerHTML = ''; $("reslut_div").style.display = 'none'; return; } } var str = originalRequest.responseText.split("#"); var suggestStr = "<table width=\"100%\" border=\"1\" cellpadding=\"1\" cellspacing=\"1\">"; for(i=0; i < str.length - 1; i++) { suggestStr += '<tr><td οnmοuseοver="onmouseOver(this);" οnmοuseοut="onmousetOut(this);" οnclick="setSuggestValue(this.innerHTML);" class="onmouset_out">' + str[i] + '</td></tr>'; } suggestStr += "</table>"; //先清空 if($("reslut_div")) { $("reslut_div").innerHTML = '';; } if(!$("reslut_div")){ var res_div = document.createElement('div'); res_div.id = "reslut_div"; }else{ res_div = $("reslut_div"); } res_div.innerHTML = suggestStr; res_div.style.background = '#99CCFF'; res_div.style.position='absolute'; res_div.style.left=frontShowMgr.getxy(eventElement).X+'px'; res_div.style.top=frontShowMgr.getxy(eventElement).Y+eventElement.clientHeight+'px'; res_div.style.width = eventElement.clientWidth +'px'; res_div.style.height = 150 +'px'; res_div.style.overflow = 'scroll'; res_div.style.border = '1px'; if(!$("reslut_div")){ document.body.appendChild(res_div); } res_div.style.display = ''; } } ); } } function onmouseOver(div) { div.style.background = '#FFDEAD'; div.style.cursor = 'hand'; } function onmousetOut(div) { div.style.background = '#99CCFF'; div.style.cursor = 'auto'; } function setSuggestValue(value) { eventElement.value = value; if($("reslut_div")) { $("reslut_div").innerHTML = ''; $("reslut_div").style.display = 'none'; return; } }
以下注意的几个知识点是:
1.当要动态的需要在前台展示一些东西的时候,常常的思路就是:
先document.createElement('div'),设置这个元素innerHTML和属性,最后document.body.appendChild()。
注意的是,有时候我们利用document中已存在的div来进行appendChild(),但如果没有这个已存在的div也没有必要写一个,只需要用document.body就可以了。因为有时候这个联动的下拉框可能做为一个jsp供其它人直接引用,如果你在jsp里create了div,引用多个这个jsp就会出现多个这样的div,这样就会有问题了。
2.用event.srcElement || event.target来获得事件触发对象。
3.用encodeURIComponent(encodeURIComponent(eventEleValue))来进行对汉字的url编码传递
3.样式方面:
设置元素的height为固定值且设置overflow,使得可以拖动滚动条。
元素的clientWidth为元素的宽度,而不是想当然的width或是style.width
把table的td的值赋给txt,用this.innerHTML来赋值过去
设置元素的position为absolute,设置元素的left,top为event元素的x,y值
getxy:function(e){ var x = 0; var y = 0; while(e){ x += e.offsetLeft; y += e.offsetTop; e = e.offsetParent; } return {X:x,Y:y} },
最终的效果如下: