智能搜索框

来源：互联网发布：染色机电脑编程编辑：程序博客网时间：2024/06/09 19:41

<%@ page language="java" contentType="text/html; charset=utf-8"    pageEncoding="utf-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Insert title here</title><script type="text/javascript" src="js/jquery.js"></script><script type="text/javascript" src="js/functions.js"></script><style type="text/css">.mouseOver{background: #708090 ;color:#FFFAFA;}.mouseOut{background: #FFFAFA ;color:#000000;}</style><script type="text/javascript">function search(){  var key =document.getElementById("searchKey");if(key.value==""){//alert("空");clear();return ;}//alert("DoC"+key.value);        $.ajax({              type:'POST',              url:'${pageContext.request.contextPath}/searchmore',              data:{mydata:key.value},              success:function(data){            // alert(data);            setContents(data);            }                        });                  function  setContents(contents){        clear();        setLoCation();        var  size = contents.length ;        for(var i = 0 ;i<size ;i++){        var  nextNode =contents[i];/* 代表JSON第i个元素 */        var  tr =document.createElement("tr");        var  td =document.createElement("td");        td.onmouseover=function() {        this.className='mouseOver';        }        td.onmouseout=function(){        this.className='mouseOut';        }        /* 当鼠标点击td时候放到输入框 */        td.onmousedown=function(){        //alert(this.innerText);        document.getElementById("searchKey").value=this.innerText ;        };        /* 文本节点 */        var text =document.createTextNode(nextNode);        td.appendChild(text);        tr.appendChild(td);        document.getElementById("content_body").appendChild(tr);                }                }      }  /*   清除上一次的数据 */function clear(){var content_body = document.getElementById("content_body");var size =content_body.childNodes.length ;for(var i =size-1 ;i>=0; i--){content_body.removeChild(content_body.childNodes[i]);}document.getElementById("popDiv").style.border="none";}function cleardata(){    clear();}function setLoCation (){var content =document.getElementById("searchKey");var width =content.offsetWidth ;var left =content["offsetLeft"];var top  =content["offsetTop"]+content.offsetHeight;var popDiv=document.getElementById("popDiv");popDiv.style.border="black 1px solid ";popDiv.style.left=left+"px";popDiv.style.top=top+"px";popDiv.style.width=width+"px";document.getElementById("mytable").style.width=width+"px";}</script></head><body><div id="searchtable">    <input class="search_text" id="searchKey" type="text" onkeyup="search()"  onfocus="search()" onblur="cleardata()"/>     <input class="search_btn" type="submit" value="搜索"/>  </div><div id="popDiv"><table id="mytable"><tbody  id="content_body"><!-- <tr><td>AJAX1</td></tr><tr><td>AJAX2</td></tr><tr><td>AJAX3</td></tr><tr><td>AJAX4</td></tr --></tbody></table></div></body></html>

后台

@RequestMapping("searchmore")@ResponseBodypublic List<String> searchmore(HttpServletRequest request){List<String> datas  = new ArrayList<>();String mydata =request.getParameter("mydata");System.out.println("从前台得到的模糊字"+mydata);List<String>  lists  =adminService.getAdminname();System.out.println(lists);for (String s : lists) {if(s.contains(mydata)){datas.add(s);}}return datas;}

阅读全文

1 0