Ajax+Servlet实现搜索框的智能提示

最新推荐文章于 2024-07-21 17:13:47 发布

少年织梦

最新推荐文章于 2024-07-21 17:13:47 发布

阅读量436

点赞数

分类专栏： web技术累积文章标签： ajax servlet 自动提示框

本文链接：https://blog.csdn.net/qq_33913037/article/details/53764996

版权

web技术累积专栏收录该内容

6 篇文章 0 订阅

订阅专栏

每日一看
创建Search.jsp页面

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>搜索框智能提示</title>
    <style type="text/css">
      #mydiv{
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -200px;
        margin-top: -50px;
      }
      .mouseOver{
        background: #708090;
        color: #FFFAFA;
      }
      .onmouseOut{
        background: #FFFAFA;
        color: #000000;
      }
    </style>
    <script type="text/javascript">
      //获得用户输入内容的关联信息的函数
      var  xmlHttp;
      function getMoreContents() {
        //获得用户的输入
        var content=document.getElementById("keyword");
        if(content.value==""){
          clearContent();
          return ;
        }
        //然后给服务器发送用户输入的内容  因为我们采用的是ajax异步发送数据 所以我们要使用一个对象  叫XmlHttp对象
        xmlHttp=creatXMLHttp();
        //向服务器发送数据
        var url="/Search?keyword="+escape(content.value);
        //true表示JavaScript脚本会在send方法之后继续执行 而不会等待来自服务器的响应
        xmlHttp.open("GET",url,true);
        //xmlHttp绑定回调方法 这个回调方法会在xmlHttp状态改变的时候被调用
        //xmlhttp的状态为0-4 我们只关心4 这个状态 因为当数据传输过程完成之后 再回调方法才有意义
        xmlHttp.onreadystatechange=callback;
        xmlHttp.send(null);
      }
      function  creatXMLHttp() {
        //对于大多数历览器都实用
        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){
          //200代表服务器响应成功
          //404代表服务器未找到  500代表服务器内部错误
          if(xmlHttp.status==200){
            //交互成功 获得相应的数据 是文本格式
            var result=xmlHttp.responseText;
            //解析获得数据
            var json=eval("("+result+")");
            //获取数据之后 就可以动态的显示这些数据了 吧这些数据展示到输入框的下面
            //alert(json);
            setContent(json);
          }
        }
      }
      //设置关联数据的展示
      function setContent(contents) {
        //情况数据
        clearContent();
        setLocation();
        //首先获的关联数据的长度 以此来确定生成多少<tr></tr>
        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");
          //为tr td设置属性
          td.setAttribute("border",0);
          td.setAttribute("bgcolor","#FFFAFA");
          //为每行绑定函数 移上去 移开
          td.onmouseover=function () {
            this.className='mouseOver';
          }
          td.onmouseout=function () {
            this.className='onmouseOut';
          }
          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 setLocation() {
        var content=document.getElementById("keyword");
        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("content_table").style.width=width+"px";
      }
    </script>
  </head>
  <body>
  <div id="mydiv">
    <!--输入框-->
    <input type="text" size="70" id="keyword" onkeyup="getMoreContents()" onblur="keywordBlur()" onfocus="getMoreContents()">
    <input type="button" value="百度一下" width="50px">
    <!--内容展示的区域-->
    <div id="popDiv">
      <table id="content_table" bgcolor="#FFFAFA" border="0" cellpadding="0" cellspacing="0">
        <tbody id="content_table_body">
        <!--动态查询出来的数据显示在这个地方-->
        </tbody>
      </table>
    </div>
  </div>
  </body>
</html>

创建Servlet

public class SearchServlet extends javax.servlet.http.HttpServlet { static List<String> datas=new ArrayList<>();  static { //模拟数据   datas.add("ajax");  datas.add("ajax post");  datas.add("becky");  datas.add("bill");  datas.add("james");  datas.add("jerry");  } protected void doPost(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException { } protected void doGet(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException { request.setCharacterEncoding("utf-8");  response.setCharacterEncoding("utf-8");  //首先获得客户端发送来的数据keyword  String keyword=request.getParameter("keyword");  //获得关键字过后进行处理 得到关联数据  List<String> listData=getData(keyword);  //返回Json格式  response.getWriter().write(JSONArray.fromObject(listData).toString());  } //获得关联数据  public List<String> getData(String keyword){ List<String> list=new ArrayList<>();  for (String data:datas){ if(data.contains(keyword)){ list.add(data);  } } return list;  } }

web.xml配置

<servlet>  <servlet-name>SearchServlet</servlet-name>  <servlet-class>com.czmec.servlet.SearchServlet</servlet-class> </servlet> <servlet-mapping>  <servlet-name>SearchServlet</servlet-name>  <url-pattern>/Search</url-pattern> </servlet-mapping>

demo下载

http://download.csdn.net/detail/qq_33913037/9716722

少年织梦

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax+Servlet实现搜索框的智能提示

每日一看创建Search.jsp页面<%@ page contentType="text/html;charset=UTF-8" language="java" %><html> <head> <title>搜索框智能提示</title> <style type="text/css"> ...
复制链接

扫一扫

专栏目录