页面仿百度下拉框,支持动态后台提取数据

　　
　　.bottom_up {
　　font-family: "宋体", Arial, sans-serif, "宋体", "黑体";
　　font-size: 12px;
　　height: 22px;
　　border: 1px solid #738C4A;
　　background-color: #DEE6CC;
　　margin-right: 5px;
　　color: #738C4A;
　　padding-right: 4px;
　　padding-left: 4px;
　　}
　　.input_1_4 {
　　height: 20px;
　　width: 320px;
　　border: 1px solid #738C4A;
　　font-family: "宋体", Arial, sans-serif, "宋体", "黑体";
　　background-color: #f6f9f1;
　　color:#738C4A;
　　font-size: 12px;
　　margin-right: 5px;
　　margin-left: 5px;
　　line-height: 20px;
　　}
　　
　　
　　
　　
　　
　　
　　 
　　function getAbsolutePos(p) {
　　var left = (navigator.appVersion.indexOf("MSIE")!=-1)?documen t.getElementById("box").offsetLeft:p.offsetLeft;
　　var top = (navigator.appVersion.indexOf("MSIE")!=-1)?documen t.getElementById("tt").offsetTop:p.offsetTop;
　　var r = {"x":left, "y":top};
　　if(r.offsetParent) {
　　var temp = getAbsolutePos(r.offsetParent);
　　r.x += temp.x;
　　r.y += temp.y;
　　}
　　return r;
　　}
　　function getNextPos(p,t) {
　　var a = document.getElementById(p);
　　var r = getAbsolutePos(a);
　　if(navigator.appVersion.indexOf("MSIE")!=-1) {
　　document.getElementById(t).style.top = r.y + a.offsetHeight + 29;
　　document.getElementById(t).style.left = r.x + a.offsetLeft + 10 + 95;
　　}else {
　　document.getElementById(t).style.top = a.offsetHeight + 238 + "px";
　　document.getElementById(t).style.left = r.x + 243 + 95 + "px";
　　}
　　if(t == "showOrg") hidden("showTopic");
　　else hidden("showOrg");
　　}
　　function getNextPos1(p,t) {
　　var a = document.getElementById(p);
　　var r = getAbsolutePos(a);
　　if(navigator.appVersion.indexOf("MSIE")!=-1) {
　　document.getElementById(t).style.top = r.y + a.offsetHeight + 29;
　　document.getElementById(t).style.left = r.x + a.offsetLeft + 10 + 95 + 455;
　　}else {
　　document.getElementById(t).style.top = a.offsetHeight + 238 + "px";
　　document.getElementById(t).style.left = r.x + 243 + 95 + 444 + "px";
　　}
　　if(t == "showOrg") hidden("showTopic");
　　else hidden("showOrg");
　　}
　　var _index = -1;
　　function move(id, index){ 
　　if(isVisible(id)) {
　　var div = document.getElementById(id);
　　if(div.childNodes && div.childNodes.length > 0){
　　var arr = div.childNodes[0].childNodes;
　　var cur = parseInt(_index);
　　if(index == -1){
　　cur -= 1; 
　　}else{
　　cur += 1; 
　　}
　　if(cur  0){
　　var arr = div.childNodes[0].childNodes;
　　for(var i = 0; i  0){
　　var arr = div.childNodes[0].childNodes;
　　for(var i = 0; i "+data[i].name+"");
　　}
　　dojo.byId("showTopic").innerHTML = ""+textBuffer.join("")+"";
　　_index = -1;
　　}      
　　},
　　error : function(type, data, e){},
　　mimetype : "text/json",
　　sync : false 
　　}); 
　　}else {
　　suggest("showTopic", null, ev);
　　}   
　　}
　　function refresh(ev){
　　getNextPos("word","showOrg");
　　document.getElementById("zhutiText").value = "";
　　var event = window.event || ev;
　　if(event.keyCode!="38" && event.keyCode!="40" && event.keyCode!="13"){
　　var word = dojo.byId("word").value;
　　if(word!="") {
　　show("showOrg");
　　}
　　var content = {action:"query4OrgList", word:encodeURI(word)};
　　dojo.io.bind({
　　url : "#springUrl('')/page/dataupdate/updateInfoCtrl.do" ,
　　content : content,
　　preventCache : true, 
　　method : "POST",
　　encoding : "utf",
　　load : function(type, data, e){       
　　var textBuffer = [];
　　if(data[0].name=="") {
　　hidden("showOrg");
　　}else {
　　for(var i=0; i"+da ta[i].name+"");
　　}
　　dojo.byId("showOrg").innerHTML = ""+textBuffer.join("")+"";
　　_index = -1;
　　}
　　},
　　error : function(type, data, e){},
　　mimetype : "text/json",
　　sync : false 
　　});     
　　}else {
　　suggest("showOrg","zhutiText",ev);
　　}
　　}
　　
　　
　　
　　查询条件
　　
　　单位名称
　　
　　
　　
　　主题名称
　　
　　
　　
　　
　　
　　开始时间
　　 
　　
　　结束时间
　　 
　　
　　
　　
　　 
　　 
　　
　　
　　
　　
　　
　　
　　控制器：
　　public ModelAndView query4OrgList(HttpServletRequest request,
　　HttpServletResponse response, UpdateInfoCmd cmd) throws Exception {
　　request.setCharacterEncoding("utf-8");
　　response.setContentType("text/json; charset=gbk"); 
　　List list = new ArrayList();
　　String word = null;
　　try {
　　word = ServletRequestUtils.getStringParameter(request, "word", "");
　　word = URLDecoder.decode(word, "UTF-8").trim();
　　list = topicInfoSve.getOrgName(word);
　　String data = "[";
　　String dataStr = "";
　　if(list!=null && list.size()!=0) {
　　for(int i=0; i<list.size(); i++) {
　　System.out.println(list.get(i));
　　data = data+"{name:'"+list.get(i)+"'},";
　　dataStr = data.substring(0, data.length()-1);
　　}
　　} else {
　　dataStr = data+"{name:''}";
　　}
　　dataStr = dataStr+"]";
　　response.getWriter().write(dataStr);
　　} catch (IOException e) {
　　e.printStackTrace();
　　}
　　return null;
　　}
　　public ModelAndView query4TopicList(HttpServletRequest request,
　　HttpServletResponse response, UpdateInfoCmd cmd) throws Exception {
　　request.setCharacterEncoding("utf-8");
　　response.setContentType("text/json; charset=gbk"); 
　　List list = new ArrayList();
　　String word = "";
　　String topicword = "";
　　try {
　　word = ServletRequestUtils.getStringParameter(request, "word", "");
　　topicword = ServletRequestUtils.getStringParameter(request, "zhutiText", "");
　　word = URLDecoder.decode(word, "UTF-8").trim();
　　topicword = URLDecoder.decode(topicword, "UTF-8").trim();
　　list = topicInfoSve.getTopicName(word, topicword);
　　String data = "[";
　　String dataStr = "";
　　if(list!=null && list.size()!=0) {
　　for(int i=0; i<list.size(); i++) {
　　TopicInfo topicInfo = (TopicInfo) list.get(i);
　　data = data+"{name:'"+topicInfo.getTopicName()+"'},";
　　dataStr = data.substring(0, data.length()-1);
　　}
　　} else {
　　dataStr = data+"{name:''}";
　　}
　　dataStr = dataStr+"]";
　　response.getWriter().write(dataStr);
　　} catch (IOException e) {
　　e.printStackTrace();
　　}
　　return null;
　　}