搜索提示功能

1.功能描述：类似百度搜索框的效果，输入“中”，会有提示“中国”，“中华”，“中餐”等内容。

2.用到技术：jquery，json

3.jsp代码：

 

<tr>
				
				    <td width="154px">
				     <input type="hidden" name="soption" id="soption" value="soption"></input>
				     <input type="hidden" name="opvalue" id="opvalue" value="opvalue"></input>
				      <select id="scondition" οnchange="whichSearch()"> 
							<option  value="dictionaryName">字典名称</option> 
							<option  value="dictionaryCode">字典编码</option>
					   </select>
				    </td>
					<td width="154px">
						<input id="searchName" name="searchName" type="text" value="${opvalue}" class="inputBorder" maxlength="15" />
					</td>
					<td width="5"></td>
					<td width="66px">
					   
						<input  class="rSearch" type="button"  value="查&nbsp;询" οnclick="findByCondition()"/>
					</td>
					<td>
						&nbsp;
					</td>
					<td width="160px">
						<input  class="rAdd" type="button"  value="新&nbsp;增"	 οnclick="add();"/>
				    </td>
				</tr>

js代码：var dicCodeList;

    var dicNameList;
  	
  	/*
  	 * 搜索提示框,页面加载时查出所有查询条件并存到dicCodeList，dicNameList两个全局变量中。默认加载提示框的查询条件是第一个。
  	 */
  	    $(document).ready(function() {
		    $.ajax({
					url:"${ctx}/dictionary/searchTip",
					type:"post",
					data:$("#inputForms").serializeArray(),
					dataType:"json",
					success:function(datas){
						 dicCodeList=datas[0];
						 dicNameList=datas[1];
						 
		  	    		$("#searchName").autocomplete(dicNameList,{  
							           max: 12,    //列表里的条目数
									   width: 150,     //提示的宽度，溢出隐藏
									   scrollHeight: 120,   //提示的高度，溢出显示滚动条
									   matchContains: true,    //包含匹配，就是data参数里的数据，是否只要包含文本框里的数据就显示
									   autoFill: false    //是否自动填充
					    }); 
				    },
				    error:function(event,errors){
						alert("json数据获取失败！");
					}
			});
		});

/*
		 * 根据选择的查询提交不同，给出相应的查询条件提示。
		 */
		function whichSearch(){
  	    	var selectValue=document.getElementById("scondition").value;
  	    	if(selectValue="dictionaryCode"){
  	    		$("#searchName").autocomplete(dicCodeList,{  
					           max: 12,    //列表里的条目数
							   width: 150,     //提示的宽度，溢出隐藏
							   scrollHeight: 120,   //提示的高度，溢出显示滚动条
							   matchContains: true,    //包含匹配，就是data参数里的数据，是否只要包含文本框里的数据就显示
							   autoFill: false    //是否自动填充
			    }); 
  	    	}else if(selectValue="dictionaryName"){
  	    		$("#searchName").autocomplete(dicNameList,{  
					           max: 12,    //列表里的条目数
							   width: 150,     //提示的宽度，溢出隐藏
							   scrollHeight: 120,   //提示的高度，溢出显示滚动条
							   matchContains: true,    //包含匹配，就是data参数里的数据，是否只要包含文本框里的数据就显示
							   autoFill: false    //是否自动填充
			    }); 
  	    	}
  	    }

 

java代码：

/**
	 * 搜索提示功能
	 * @param request
	 * @param response
	 * @throws IOException
	 */
	@RequestMapping(value = "/searchTip")
	public void searchTip(HttpServletRequest request,HttpServletResponse response) throws IOException{
		List<IDictionaryClass> dicList=null;
		List<Object> dicCodeList=new ArrayList<Object>();
		List<Object> dicNameList=new ArrayList<Object>();
		List<Object> searchList=new ArrayList<Object>();
		Object[] param=null;
		String hql="From IDictionaryClass";
		String json="";
		try {
			String searchKey=request.getParameter("p");
			if((searchKey!=null)&&!("".equals(searchKey))){
				hql+=" where dictionaryCode="+searchKey;
			}
			dicList=dicService.find(hql, param);
			for(int i=0;i<dicList.size();i++){
				dicCodeList.add(dicList.get(i).getDictionaryCode());
				dicNameList.add(dicList.get(i).getDictionaryName());
			}
			searchList.add(dicCodeList);
			searchList.add(dicNameList);
			Gson gson=new Gson();
			json=gson.toJson(searchList);
			response.setContentType("text/html;charset=utf-8");
			PrintWriter out = response.getWriter();
			out.println(json);
		} catch (ServiceException e) {
			logger.error(e);
		}
		
	}