java语言jQuery ui Autocomplete 自动补全+ajax获取数据库

知识要点：

1，jQuery ui Autocomplete 自动补全插件使用

2，ajax获取后台（数据库）数据

3，java语言环境SpringMVC

4，修改Autocomplete再带下拉框样式，添加滚动条，

 

键入关键字：

选择对应数据： 

 

引入js文件：

<link rel="stylesheet" href="http://apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>

css修改默认的布局方式：

		input[type=number] {
			-moz-appearance: textfield;
		}
		
		input[type=number]::-webkit-inner-spin-button,  
		input[type=number]::-webkit-outer-spin-button {
			-webkit-appearance: none;
			margin: 0;
		}
		
		.ui-helper-hidden-accessible {
			display: none;
		}
		
		.ui-autocomplete {
			position: absolute;
			cursor: default;
			border-radius: 3px;
			border: 1px solid #c0c0c0;
		}
		
		.ui-menu {
			list-style: none;
			padding: 0;
			margin: 0;
			display: block;
			outline: none;
		}
		
		.ui-menu .ui-menu-item a {
			text-decoration: none;
			display: block;
			padding: .2em .4em;
			line-height: 1.5;
			zoom: 1;
		}
		
		.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus {
			background: #2f99ff;
			border: none;
			color: #fff;
			border-radius: 0;
			font-weight: normal;
		}
		
		.ui-autocomplete {
			max-width: 300px;
			max-height: 300px;
			overflow-y: auto;
			overflow-x: hidden;
		}
		* html .ui-autocomplete {
			height: 100px;
		}

HTML代码

<h4 style="color: red;">jQuery ui Autocomplete 自动补全+ajax获取数据库</h4>
<h3 style="color: #2f99ff;">支行信息查询：</h3>
<input name="brandName" type="text" style="width: 300px;" class="form-control" id="brandMsg" placeholder="请键入支行信息……" >
<h3 style="color: #2f99ff;">选择结果：</h3>
<div>
支行名称：<span id="bankName" style="color: red; font-size: 14px;"></span><br/>
支行编号：<span id="bankCode" style="color: red; font-size: 14px;"></span>
</div>
</div>

js代码 

<script type="text/javascript">
		$(function() {
		    var banddata = [];
		    $("#brandMsg").autocomplete({
		    	autoFocus: false,//如果设置为 true，当菜单显示时，第一个条目将自动获得焦点。
		    	delay:400,////击键后的延迟时间(单位毫秒).Default: 远程为400 本地10
		    	minLength:2,//执行搜索前用户必须输入的最小字符数。对于仅带有几项条目的本地数据，通常设置为零，
		    	width: 220,//下拉框的宽度，default：input元素的宽度
		    	max: 4,//下拉项目的个数，default：10
		    	scrollHeight: 300,// 下拉框的高度， Default: 180
				scroll: true,//当结果集大于默认高度时，是否使用滚动条，Default: true
				multiple: false,//是否允许输入多个值. Default: false
				autoFill: false,// 是否自动填充. Default: false
				multipleSeparator: " ",//输入多个字符时,用来分开各个的字符. Default: ","
				matchCase:false,//是否开启大小写敏感
				selectFirst:true,// 如果设置成true,下拉列表的第一个值将被自动选择, Default: true
				matchSubset:true,//是否启用缓存
				cacheLength: 10,//缓存的长度.即缓存多少条记录.设成1为不缓存.Default: 10
				mustMatch:false,//如果设置为true,只会允许匹配的结果出现在输入框,当用户输入的是非法字符时,将被清除， Default: false
				matchContains:true,//决定比较时是否要在字符串内部查看匹配.Default: false
		        source: function(request, response) {
		            var datas = $("#brandMsg").val();
		            $.ajax({
		                type: "get",
		                url: 'demos/getDatas.do?brandName=' + datas,
		                dataType: "json",
		                async: false,
		                success: function(data) {
		                	console.log(data.result);
		                    banddata = data.result;
		                }
		            });
		         response($.map(banddata,
		            function(item) { // 此处是将返回数据转换为 JSON对象，并给每个下拉项补充对应参数
		                return {
		                    // 设置item信息
		                    label: item.label.toString(),
		                    // 下拉项显示内容
		                    value: item.value.toString(),
		                    // 下拉项对应数值                                  
		                }
		            }));
		        },
		        // 输入框字符个等于2时开始查询
		        select: function(event, ui) { // 选中某项时执行的操作
		        	// 存放选中选项的信息
		        	console.log("您当前已选中label："+ui.item.label);
		        	console.log("您当前已选中value："+ui.item.value);
		        	$("#bankName").html(ui.item.label);
		        	$("#bankCode").html(ui.item.value);
		        }
		    }).focus(function () {
                $(this).autocomplete("search");//autocomplete 获取焦点时得到显示列表
            });
		});
	  </script>

JAVA代码（执行数据库代码略）

/**
	 * 获取数据
	 * @param page
	 * @throws Exception
	 */
	@RequestMapping(value="/getDatas")
	public void getSysPlyDoCountS(HttpServletRequest request,HttpServletResponse response,Page page){
		
		System.out.println("======================开始访问方法："+DateUtil.getSdf_SSSTimes()+"======================");
		logBefore(logger, Jurisdiction.getUsername()+"方法correctPersonInfo");
		//返回的结果
		Map<String, Object> resultRqsMap = new HashMap<String, Object>();
		PageData pd = new PageData();
		
		pd = this.getPageData();
		String brandName = pd.getString("brandName");
		pd.put("C_BANK_NAME", "102");
		pd.put("C_BANK_BRANCH_NAME", brandName);
		pd.put("NAME", "%"+brandName+"%");
		pd.put("CODE", "102%");
		
		List<PageData>  cityListInfo = new ArrayList<PageData>();
		PrintWriter out  =  null;
		try {
			page.setPd(pd);
			cityListInfo = policyAuthoriseManager.findBranchInfo(page);
			
			request.setCharacterEncoding("UTF-8");
			response.setCharacterEncoding("UTF-8");
			out  = response.getWriter();
		} catch (Exception e) {
			e.printStackTrace();
		}
		Map<String, String>[] ccc = new Map[cityListInfo.size()];
		int nums = 0;
		for (PageData pds : cityListInfo) {
//			T.CODE,T.NAME
			Map<String, String> tempMap = new HashMap<String, String>();
			tempMap.put("label", pds.getString("NAME"));
			tempMap.put("value", pds.getString("CODE"));
			tempMap.put("id", nums+"");
			ccc[nums] = tempMap;
			nums++;
		}
		
		resultRqsMap.put("result", ccc);
    	JSONObject json = JSONObject.fromObject(resultRqsMap);
        out.print(json.toString());  
	}