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

*效果展示:【如图左边为项目信息的下拉菜单,在其右边有一个输入框。实现效果在右边输入框的位置,输入“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

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

在AJAX里 使用【 XML 】 返回数据类型 实现简单的下拉菜单数据

在AJAX里 使用XML返回数据类型 实现简单的下拉菜单数据 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <

在AJAX里 使用【 JSON 】 返回数据类型 实现简单的下拉菜单数据

在AJAX里 使用JSON返回数据类型 实现简单的下拉菜单数据 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> &l

select下拉菜单反显不可修改,且submit可以提交数据

首先通过后台funcA()将下拉菜单反显不可修改的数据response到disable.jsp页面,disable.jsp: <script> var data1=${result.object.data1}; var data2=${result.object.data2}; var data3=${result.object.data3}; ......条件 function setDisable(){ show(data1,data2,data3); $("#.disable_

html 下拉菜单套件 autocomplete 可模糊搜寻套 API数据

一个html 下拉套件菜单 ,可套API拉JSON数据....迷糊搜寻菜单数据 之类的.... http://www.runoob.com/jqueryui/example-autocomplete.html 原文:大专栏  html 下拉菜单套件 autocomplete 可模糊搜寻套 API数据 原文地址:https://www.cnblogs.com/chinatrump/p/11496835.html

表单开发(二):获取单选按钮,多行文本框,下拉菜单,捆绑元素数据,用户注册

单选按钮:<input type="radio"> 多行文本框:<textarea rows="5" cols="30"></textarea> 下拉菜单:seclet option <select name="home" ><!--下拉列表--> <option value="北 京">北 京</option> <o

使用select下拉菜单筛选table表格内容

使用select下拉菜单筛选table表格内容:本章节介绍一下如何利用select下拉菜单对表单的内容进行筛选,如果数据量庞大,便于搜索使用的话,筛选效果还是非常有必要的,代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/&qu

[ PHP+jQuery ] ajax 多级联动菜单的应用:电商网站的用户地址选择功能 ( 一 ) - 传统下拉菜单

/** jQuery version: 1.8.3 Author: 小dee Date: 2014.11.5 */ 说明:分析其他网站的图片较多,可以在目录跳过直接看本文 demo . 目录: 其他网站分析 亚马逊 淘宝 京东 当当 本文案例 demo1 demo2 [ 后面的博文再写 ] demo3 [ 后面的博文再写 ] 惯例,先看看他山之石,选择了四家比较大的电商网站:亚马逊.淘宝.京东.当当,看看它们的地址联动菜单是怎么做的. 1. 亚马逊[返回目录][下一节:淘宝] 图1 默认界面 说

Android自定义控件:仿美团下拉菜单及相关代码优化

背景 最近的项目中用到了类似美团中的下拉多选菜单,在实际开发过程中,也发现了一些问题,主要归纳如下: 1.当菜单较为复杂时,如果不能设计好代码逻辑,将造成控件难于维护 2.美团菜单可以连续点击顶部tab,切换不同菜单,而我使用的popupWindow似乎在展开一个菜单时点击其他tab,菜单就会收回. 本文将针对如上两个问题进行一些讨论,最终给出较为合理的解决方案. 程序结构 由于菜单涉及多级多项,如果把UI和其他逻辑堆在一起写,必然会造成代码过于庞大,甚至没有办法扩展,更谈不上及时变更需求. V

Siebel 找字段、下拉菜单设置值、弹出新页面、弹出选择框、设置默认值 、按钮代码

产品缺陷太多,跟用户交互不人性化.例如搜索新建客户功能,用户输入后会自动保存数据,一旦保存后一. 找字段1.简单 CTRL+Q CTRL+Q 服务请求编号----对应的表.字段.长度: 客户编码-----对应的表.字段.长度(弹出新页面):- 点击上面的pick Applet会弹出“选取客户”对话框 有JOIN就不用TABLE:require代表必填 字段有两个值----项目编号 下图确定只有projectNum有用 3.表单中的字段(不在list column中,而是在control) 二.下