*效果展示:【如图左边为项目信息的下拉菜单,在其右边有一个输入框。实现效果在右边输入框的位置,输入“A”,在昨天的下拉框信息中值显示“A”对应的信息】
*功能实现:
【jsp页面功能实现:】
获取你要的所有项目信息
<% List project_list = (List)request.getAttribute("project_list"); %>
js组装成信息数组
<SCRIPT LANGUAGE="JavaScript"> //将所有的项目信息存放到数组中. var array_pro = new Array(); <s:set name="proOrder" value="0"/> <s:iterator value="#request.project_list"> array_pro['<s:property value="#proOrder"/>']=new Array('<s:property value="PRO_ID"/>','<s:property value="PRO_NAME"/>'); <s:set name="proOrder" value="#proOrder+1"></s:set> </s:iterator> function getList(proname){ if(proname != '' && proname != '请输入项目名称'){ var new_proarry = new Array(); var regu = proname; var re = new RegExp(regu); var new_order=0; for(var i=0;i<array_pro.length;i++){ if(array_pro[i][1].search(re)!=-1){ new_proarry[new_order]=array_pro[i]; new_order=new_order+1; } } var str_pro = ""; $("select[id='PRO_ID'] option").remove(); if(new_proarry.length==0){ str_pro="<option value=\"\">--请选择项目--</option>"; $('#PRO_ID').append(str_pro); return false; } for(var i = 0; i < new_proarry.length; i++) { str_pro+="<option value="+ new_proarry[i][0]+">"+new_proarry[i][1]+"</option>"; } $('#PRO_ID').append(str_pro); } else{ new_proarry=array_pro; $("select[id='PRO_ID'] option").remove(); var str_pro="<option value=\"\">--请选择项目--</option>"; for(var i = 0; i < new_proarry.length; i++) { str_pro+="<option value="+ new_proarry[i][0]+">"+new_proarry[i][1]+"</option>"; } $('#PRO_ID').append(str_pro); } } </script>
页面展示内容:
<tr class="fontSy"> <td height="25" align="center"><font color="red" >*</font>项目名称</td> <td height="25" align="left"> <s:select list="#request.project_list" listKey="PRO_ID" listValue="PRO_NAME" theme="simple" name="PRO_ID" id="PRO_ID" headerKey="" headerValue="--请选择项目--" cssStyle="width:300px;" /> <input value="请输入项目名称" onclick="if(this.value=='请输入项目名称') this.value=''" onblur="if(this.value=='') this.value='请输入项目名称';" style="border:none;width:100px;color: red;" onkeyup="getList(this.value);"> </td> </td>
</tr>
后台action只是实现一个简单的全部查询,然后保存起来,然后再前台调用,这里就不写了。
时间: 2024-10-01 10:32:16