对于数据量庞大的下拉菜单建立对应的联想查询

*效果展示:【如图左边为项目信息的下拉菜单,在其右边有一个输入框。实现效果在右边输入框的位置,输入“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只是实现一个简单的全部查询,然后保存起来,然后再前台调用,这里就不写了。


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值