需要实现的功能:
功能描述:在文本框输入相关联信息,根据相关信息到数据库进行模糊查询然后到前台显示,显示后选中数据传到后台。
实现功能的方法:ajax异步交换数据,html dom解析
实现功能过程:
(1)html代码
//此处代码从网上复制
(4)通过ajax传值(pstr)到后台
//此处代码出自于我师傅
总体流程:
由于<select/>标签不支持手动编辑,所以用一个<input/>标签覆盖<select/>标签显示的位置;然后为了达到边输入边显示数据的效果,所以增加一个<div/>来动态显示查询得来的数据,此<div/>紧跟在<input/>标签下面,然后通过<input/>标签的name属性将数据再次传到后台,步骤(1),(2)完成此过程。
步骤(3)调用步骤(4)将<input/>标签里的数据即时传到后台,然后步骤(5)接受到json格式的数据然后解析成String到数据库进行模糊查询,在然后步骤(3)通过调用步骤(4)得到后台传回来的数据并动态为<select/>标签生成<option/>标签。
ajax前后台传数据请参照ajax博文
![<select/><div/><input/>组合下拉框模糊查询服务器版 <select/><div/><input/>组合下拉框模糊查询服务器版](https://i-blog.csdnimg.cn/blog_migrate/a4c26d1e5885305701be709a3d33442f.gif)
- <div style="border:0px
solid green; font-size :14PX;white-space:nowrap; -
width:230px;position:absolute;left:320px;top:100px">卡号:</div> - <div style="position:relative;">
-
<span style="margin-left:230px;width:18px;overflow:hidden;"> -
<select style="HEIGHT: 22px; WIDTH: 250px; margin-left:-190px;" οnchange="SelectValue(this)" οnclick="SelMatch(this)" id="SelectOption" > -
</select> -
</span> -
<input name="card.cardNo" id="box2" style="width:230px;position:absolute;left:40px;" οnkeyup="indistinctcard();InputValue(this)" οnblur="NoMsg()" οnfοcus="this.select();InputValue(this)"/> -
<div id="msg" style="border:1px solid green; font-size :14PX;white-space:nowrap;overflow:hidden;width:230px;position:absolute;left:40px;top:20px;display:none"> -
</div> -
</div> -
<Input Type="Hidden" Name="txtSection" id="txtSection">
//此处代码从网上复制
- var j = 0;
- function SelectValue(obj)
- {
-
var input = obj.parentNode.nextSibling; -
document.all.box2.value = obj.options[obj.selectedIndex].text; - //
alert(document.all.box2.value); -
document.getElementByIdx_x("txtSection").value=obj.options[obj.selectedIndex].value; - //
alert(document.getElementByIdx_x("txtSection").value); - }
-
- function InputValue(obj)
- {
-
var n = 1; -
var tmpObj; -
var src = document.all.SelectOption; -
var msg = document.all.msg; -
if(event.keyCode != 40 && event.keyCode != 38 && event.keyCode != 13){ -
if(obj.value!=""){ -
msg.style.display=""; -
msg.innerHTML=""; -
if(msg.hasChildNodes()) -
{ -
msg.childNodes[0].parentNode.removeChild(msg.childNodes[0]); -
} -
-
for (var i=0;i<src.length;i++){ -
var selValue = document_createElement_x("div"); -
var selText = document_createElement_x("div"); -
selText.value = src(i).value; -
selText.innerHTML = src(i).text; -
-
if (src(i).text.toLowerCase().indexOf(obj.value.toLowerCase())==0){ -
selText.setAttribute("id","selText"+n); -
selText.οnmοuseοver=function (){ -
this.style.backgroundColor='#003399'; -
this.style.color ='#ffffff'; -
} -
selText.οnmοuseοut=function (){ -
this.style.backgroundColor='#ffffff'; -
this.style.color ='#000000'; -
} -
selText.οnclick=function (){ -
document.all.box2.value = this.innerHTML; -
msg.style.display="none"; -
document.getElementByIdx_x("txtSection").value=this.value; -
} -
msg.a(selText); -
n++; -
} -
} -
} -
else { -
document.all.msg.style.display="none"; -
} -
} -
else { -
//press down key -
if(event.keyCode==40){ -
j++; -
for (var i=0; i<src.length; i++) -
{ -
tmpObj = document.getElementByIdx_x("selText"+i); -
if(tmpObj != null){ -
tmpObj.style.backgroundColor='#ffffff'; -
tmpObj.style.color ='#000000'; -
} -
} -
tmpObj = document.getElementByIdx_x("selText"+j); -
if(tmpObj != null){ -
tmpObj.style.backgroundColor='#003399'; -
tmpObj.style.color ='#ffffff'; -
}else{ -
j = 0; -
} -
} -
//press up key -
if (event.keyCode==38){ -
j--; -
for (var i=0; i<src.length; i++) -
{ -
tmpObj = document.getElementByIdx_x("selText"+i); -
if(tmpObj != null){ -
tmpObj.style.backgroundColor='#ffffff'; -
tmpObj.style.color ='#000000'; -
} -
} -
tmpObj = document.getElementByIdx_x("selText"+j); -
if(tmpObj != null){ -
tmpObj.style.backgroundColor='#003399'; -
tmpObj.style.color ='#ffffff'; -
}else{ -
j = 2; -
} -
} -
//press enter key -
if (event.keyCode==13){ -
tmpObj = document.getElementByIdx_x("selText"+j); -
document.all.box2.value = tmpObj.innerHTML; -
msg.style.display="none"; -
document.getElementByIdx_x("txtSection").value=tmpObj.value; -
} -
} - }
-
- function SelMatch(src)
- {
-
var currSel = document.all.box2.value; -
for (var i=0;i<src.length;i++){ -
if (src(i).text==currSel) -
{ -
src.options(i).selected = true; -
} -
} - }
-
- function NoMsg()
- {
-
if(document.activeElement.id=="msg") -
return false; -
else -
document.all.msg.style.display='none'; - }
indistinct=function(){
-
var indistinctdata=document.all.box2.value; -
var ret=this.ajaxRequest("/json/indistinctdata",indistinctdata); -
var rolesList=ret.rolesList; -
var myselect=document.getElementByIdx_x("SelectOption"); -
-
var x=document_createElement_x('option'); -
x.text='---Please Select---'; -
myselect.add(x,null); -
-
for(;myselect.length>1;){ -
myselect.remove(myselect.length-1); -
} -
for(var i=0;i<rolesList.length;i++){ -
var y=document_createElement_x('option'); -
y.text=rolesList[i].rolename; - //
y.value=rolesList[i].rolename; -
try -
{ -
myselect.add(y,null); // standards compliant -
} -
catch(ex) -
{ -
myselect.add(y); // IE only -
} -
} - //
document.getElementByIdx_x("select").attachEvent('onmouseover',indistinct); - //
document.getElementByIdx_x("select").style.display='block'; -
}
- //new 3个对象
- transportFactory = [function() {
-
return new XMLHttpRequest(); -
- }, function() {
-
return new ActiveXObject('Microsoft.XMLHTTP'); - }, function() {
-
return new ActiveXObject('Msxml2.XMLHTTP'); - }];
- // 得到Ajax本浏览器实现对象
- createNewTransport = function() {
-
var factory = transportFactory; -
var transport = null; -
for (var i = 0, length = factory.length; i < length; i++) { -
var lambda = factory[i]; -
try { -
transport = lambda(); -
break; -
} catch (e) { -
} -
} -
return transport; - }
- //ajax请求主要代码
- ajaxRequest = function(purl,pstr)
- {
-
var con = createNewTransport(); -
var url = window.location.protocol+ "//" + window.location.host + "/ACServer"; -
url = url + purl; //根据传入的purl生成url -
con.open("POST", url, false); -
con.setRequestHeader('encoding','UTF-8'); -
con.setRequestHeader("content-Type",'application/json'); -
var jsonRet = {}; -
con.send(pstr); -
if(con.readyState == 4){ -
var status = con.status -
if(status == 200){ -
try{ -
//alert(con.responseText); -
jsonRet = eval_r("(" + con.responseText + ")"); -
} -
catch(e){ -
alert("jsonRet error!"); -
return {}; -
} -
} -
} -
//alert(status); -
return jsonRet; - }
public String execute() throws Exception {
-
HttpServletRequest request = (HttpServletRequest)ActionContext.getContext().get(ServletActionContext.HTTP_REQUEST); -
java.io.InputStream ins = request.getInputStream(); -
InputStreamReader insr = new InputStreamReader(ins); -
int size = Integer.parseInt(request.getHeader("content-length")); -
char buf[] = new char[size]; -
insr.read(buf, 0, size); -
String indistinct=new String(buf); -
-
if(indistinct==null){ -
this.rolesList=this.rolesDao.getRoleses(); -
}else{ -
this.rolesList=this.rolesDao.getRolesByIndistinct(indistinct); -
List<Roles> rolesListNew=new ArrayList<Roles>(); -
for(int i=0;i<this.rolesList.size();i++){ -
Roles roles=new Roles(); -
roles.setRolename(this.rolesList.get(i).getRolename()); -
roles.setId(this.rolesList.get(i).getId()); -
roles.setRoleComment(this.rolesList.get(i).getRoleComment()); -
rolesListNew.add(roles); -
} -
this.rolesList=rolesListNew; -
} -
return super.execute(); -
}