智能输入框提示

最新推荐文章于 2022-10-06 19:54:33 发布

小白鼠丶

最新推荐文章于 2022-10-06 19:54:33 发布

阅读量348

点赞数

分类专栏：大杂烩

本文链接：https://blog.csdn.net/qq_33366229/article/details/79144132

版权

大杂烩专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>

<html>
<head>
<title>Insert title here</title>
<style type="text/css">
     #mydiv{
        position:absolute;
        left:50%;
        top:50%;
        margin-left:-200px;
        margin-top:-50px;
     }
     
     .mouseOver{
     background:#708090;
     color:#FFAFA;
     }
     .mouseOut{
       background:#FFAFA;
       color:#000000;
     }
</style>

<script type="text/javascript">
        var xmlHttp;
       function getMoreContents(){
    	   var content=document.getElementById("keyword");
    	   if(content.value==""){
    		   clearContent();
    		   return;
    	   }
    	   xmlHttp=getXmlHttpObject();
    	//   alert(xmlHttp);
    	   var url="search?keyword="+escape(content.value);
    	//true  表示js脚本会在send()方法之后继续执行，而不会等待来自服务器的响应
    	   xmlHttp.open("GET",url,true)
    	   //xmlHttp绑定回调方法，这个回调方法会在xmlHttp状态改变的时候被调用
    	   //xmlHttp的状态0-4 ，我们只关心4（complete）这个状态，所以说完整之后再调用回调方法才有意义
             xmlHttp.onreadystatechange=callback();
    	     xmmlHttp.send(null);
    	     alert(xmlHttp);
       }
       function getXmlHttpObject(){
    	   var xmlHttp;
    	   if(window.XMLHttpRequest){
    		   xmlHttp=new XMLHttpRequest();   
    	   }
    	   if(window.ActiveXObject){
    		  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
    		  if(!xmlHttp){
    			  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
    		  }
    	   }
    	   return xmlHttp; 	   
       }
       
       function callback(){
    	   if(xmlHttp.readyState==4){
    		   if(xmlHttp.status==200){
    			   //交互成功，获得相应的数据，是文本格式（json）
    			   var result=xmlHttp.responseText;
    			   //解析获得json数据
    			   var json =eval("("+result+")");
    			   //获得数据之后，就可以动态显示这些数据了，展示到输入框下面
    			   alert(json);
    			   setContent(json);
    		   }
    		   
    	   }
       }
       
        function setContent(contents){
        	        clearContent();
        	        setLocaton();
        	       	var size=contans.length;
        	       	for(var i=0;i<size;i++){
        	       		var nextNode=contans[i];
        	       		var tr=document.createElement("tr");
        	       		var td=document.createElement("td");
        	       		td.setAttribute("border","0");
        	       		td.setAtrribute("bgcolor","#FFFAA");
        	       		td.omnmouseover=function(){
        	       			this.calssName="mouseOver";
        	       		};
        	       		td.onmouseout=function(){
        	       			this.calssName="mouseOut";
        	       		};
        	       		td.onclick=function(){
        	       			//这个方法实现的是，当鼠标点击关联数据时，自动设置为输入框的数据
        	       		};
        	       		var text=document.createTextNode(nextNode);
        	       		td.appendChild(text);
        	       		tr.appendChild(td);
        	       		document.getElementById("content_table_body").appendChild(tr);
        	       	}       	
        }
        
        function clearContent(){
        	var contentTableBody=document.getElementById("content_table_body");
        	var size=contentTableBody.childNodes.length;
        	for(var i=size-1;i>=0;i--){
        		contentTableBody.removeChild(contentTableBody.childNodes[i]);
        	}
        	document.getElementById("popDiv").style.border="none";
        }
        //当输入框失去焦点（不去点他）的时候，关联信息清空
        function keywordBlur(){
        	clearContent();
        }
        //设置显示关联信息的位置
        function setLocaton(){
        	
        	var content=document.getElementById("keyword");
        	var width=content.offsetWidth; //输入框的距离
        	var left=content["offsetLeft"];//距离左边框的距离
        	var top=content["offsetTop"]+content.offsetHeight;//距离顶部距离
        	//获得显示数据的div
        	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("content_table").style.width=width="px";
        }
</script>
</head>
<body>
    <div id="mydiv">
          <input type="text" size="50" id="keyword"  onkeyup="getMoreContents()"
          onblur="keywordBlur()" onfocus="getMoreContents()"/>   
          <input type="button" value="百度一下" width="50px"/>
          <!-- 下面是内容展示区域 -->
          <div id="popDiv">
             <table id="content_table" bgcolor="#FFAFA" border="0" cellspacing="0"
                 cellpadding="0">
             <tbody id="content_table_body">
             
                 
                 <!-- 动态查询的数据显示在这里 -->
               <!--    <tr><td>ajax</td></tr>
                    <tr><td>ajax2</td></tr>
                      <tr><td>ajax1</td></tr> -->
             </tbody>
             
             </table>
          </div>
      </div>
</body>
</html>

package com.Serach;

import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import net.sf.json.JSONArray;

public class SearchServlet extends HttpServlet {
	
   public static List<String> datas=new ArrayList<String>();
     static{
    	 
    	 datas.add("ajax");
    	 datas.add("ajax2");
    	 datas.add("ajax3");
    	 datas.add("ajax4");
    	 datas.add("ajax5");
    	 datas.add("ajax6");
    	 datas.add("ajax7");
     }
	@Override
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		 request.setCharacterEncoding("utf-8");
		 response.setCharacterEncoding("utf-8");
		System.out.println("123");
		 
		 String keyword =request.getParameter("keyword");
		 List<String> listData=getData(keyword);
		 
		 JSONArray.fromObject(listData);
		// System.out.println(JSONArray.fromObject(listData));
		 response.getWriter().write(JSONArray.fromObject(listData).toString());
	}
   
	
	public List<String> getData(String keyword){
		List<String> list =new ArrayList<String>();
		for(String data:datas){
			if(data.contains(keyword)){
				return datas;
			}
		}
		return null;
	}
}

小白鼠丶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
智能输入框提示

"java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>html>head>title>Insert title heretitle>style type="text/css"> #mydiv{ position:absolute; left:50%;
复制链接

扫一扫