利用AJAX实现类似百度自动补全

最新推荐文章于 2022-08-21 16:41:54 发布

S117

最新推荐文章于 2022-08-21 16:41:54 发布

阅读量1.3k

点赞数

分类专栏： javascript学习笔记文章标签： ajax 百度 xmlhttprequest function string javascript

本文链接：https://blog.csdn.net/longtian1213/article/details/7765122

版权

javascript学习笔记专栏收录该内容

19 篇文章 0 订阅

订阅专栏

今天看了一天的额AJAX，晚上回到家，想做个类似于百度搜索自动补全的功能，本人javascript功底很差，正在自学，并且也比较懒。只是做了个简单的DEMO自娱自乐，算是给自己的一点鼓励，没有任何实际用途，如果对看这篇文章的人能稍微有点提示，将是我最大的收获

JSP代码如下：

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"
 contentType="text/html; charset=utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <head>
  <base href="<%=basePath%>">

  <title>ajax test</title>
  <meta http-equiv="pragma" content="no-cache">
  <meta http-equiv="cache-control" content="no-cache">
  <meta http-equiv="expires" content="0">
  <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  <meta http-equiv="description" content="This is my page">
  <style type="text/css">
li {
 list-style-type: none;
}
</style>
 </head>

 <body>
  <input type="text" οnkeyup="test.getData(event)"
   οnblur="test.displayDiv()" id="w" />
 </body>
 <script type="text/javascript">
  var test = {
   top : 0,
   left : 0,
   request : false,
   target : false,
   div : null,
   isDisplayDiv : true,
   initRequest : function(){
    if(XMLHttpRequest){
     this.request = new XMLHttpRequest();
    }else{
     try{
      this.request = new ActivexObject("Msxml2.XMLHTTP");
     }catch(e1){
      this.request = new ActivexObjcet("Microsoft.XMLHTTP");
     }
    }
   },
   getData : function(event){
    event = event || window.event;
    test.target = event.srcElement || event.target;
    test.initRequest();
    test.div = document.createElement("div");
    test.div.style.position = "absolute";
    test.div.style.heigh = "100px";
    test.div.style.width = test.target.clientWidth;
    test.div.style.border = "1px solid #000";
    test.div.style.borderTop = "none";
    var x = test.target.clientHeight;
    if(test.request){
     test.request.open("GET","<%=basePath%>/servlet/AjaxServlet?args=" + document.getElementById("w").value);
     test.request.send(null);
     test.request.onreadystatechange = function(){
      if(test.request.readyState == 4){
       if(test.request.status == 200){
        var temp = "";
        var str = eval("(" + test.request.responseText  + ")");
        for(var i = 0 ; i < str.data.length ; i++ ){
         var li = document.createElement("li")
         li.onclick = test.selectLi;
         li.onmousemove = test.changeLiColor;
         li.onmouseout = test.changeLiDisplayColor;
         li.innerHTML = str.data[i].firstName + " " + str.data[i].age + " " + str.data[i].sex;
         test.div.appendChild(li);
        }
       }
      }
     }
     test.div.style.top = test.target.offsetTop + x;
     test.div.style.left = test.target.offsetLeft;
     document.body.appendChild(test.div);
    }
    },
    displayDiv:function(){
     if(test.isDisplayDiv){
      document.body.removeChild(test.div);
    }
   },
   selectLi:function(event){
    event = event || window.event;
    var target = event.srcElement || event.target;
    test.target.value = target.innerHTML;
    document.body.removeChild(test.div);
   },
   changeLiColor:function(event){
    test.isDisplayDiv = false;
    event = event || window.event;
    var target = event.srcElement || event.target;
    target.style.backgroundColor = "gray";    
   },
   changeLiDisplayColor:function(event){
    event = event || window.event;
    var target = event.srcElement || event.target;
    target.style.backgroundColor = "";
    test.isDisplayDiv = true;
   }
  }
  </script>
</html>

后台serlvet代码：

  request.setCharacterEncoding("utf-8");
  request.setCharacterEncoding("utf-8");
  String args = request.getParameter("args");
  System.out.println(args);
  PrintWriter out = response.getWriter();
  StringBuffer sb = new StringBuffer();
  sb.append("{\"data\":[");
  sb.append("{\"firstName\" : \"jim \", \"age\" : \"10\" , \"sex\" : \"W\"},");
  sb.append("{\"firstName\" : \"tom \", \"age\" : \"20\" , \"sex\" : \"M\"},");
  sb.append("{\"firstName\" : \"cat \", \"age\" : \"30\" , \"sex\" : \"W\"},");
  sb.append("{\"firstName\" : \"lala \", \"age\" : \"40\" , \"sex\" : \"M\"}");
  sb.append("]}");
  System.out.println(sb.toString());
  out.print(sb.toString());
  out.flush();
  out.close();

S117

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
利用AJAX实现类似百度自动补全

今天看了一天的额AJAX，晚上回到家，想做个类似于百度搜索自动补全的功能，本人javascript功底很差，正在自学，并且也比较懒。只是做了个简单的DEMO自娱自乐，算是给自己的一点鼓励，没有任何实际用途，如果对看这篇文章的人能稍微有点提示，将是我最大的收获JSP代码如下：<%@ page language="java" import="java.util.*" pageEncoding=
复制链接

扫一扫

专栏目录