*效果展示:【如图左边为项目信息的下拉菜单,在其右边有一个输入框。实现效果在右边输入框的位置,输入“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="请输入项目名称" οnclick="if(this.value=='请输入项目名称') this.value=''"
οnblur="if(this.value=='') this.value='请输入项目名称';"
style="border:none;width:100px;color: red;" οnkeyup="getList(this.value);">
</td>
</td>
</tr>
后台action只是实现一个简单的全部查询,然后保存起来,然后再前台调用,这里就不写了。