智能搜索框

最新推荐文章于 2020-07-17 09:32:04 发布

原创最新推荐文章于 2020-07-17 09:32:04 发布 · 560 阅读

1 ·

CC 4.0 BY-SA版权

JS 专栏收录该内容

12 篇文章

订阅专栏

<%@ 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")
	@ResponseBody
	public 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;

	}