【AJAX】AJAX实现搜索信息自动推荐并补全

前端之家收集整理的这篇文章主要介绍了【AJAX】AJAX实现搜索信息自动推荐并补全前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
好久没有继续看AJAX的视频教程了,今天就将最后一个教程案例做完。我们在搜索引擎中输入文字时文本框下会提示相应的信息,这个案例就是实现这种基本功能代码比较粗糙还需要进一步完善,其中有些地方也需要向大神们请教一下。完成效果截图:


一、事先代码准备工作:

1. JQueryAutoComplete.html负责页面端的显示

a)截图如下:

b)代码如下:

<!DOCTYPE html>
<html>
 <head>
  <title>自动补全示例</title>
  <Meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <script type="text/javascript" src="jslib/jQuery.js"></script>
<span style="white-space:pre">	</span><script type="text/javascript" src="jslib/jqueryauto.js"></script>
  <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
 </head>
 <body>
 补全示例:
 <span style="white-space:pre">	</span><input type="text" id="word"/>
 <span style="white-space:pre">	</span><input type="button" value="提交"/><br/>
 <span style="white-space:pre">	</span><div id="auto"></div>
 </body>
</html>

c)注:页面HTML代码基本上在后面的编写中不会改变。

2. jqueryauto.js负责对页面元素进行更改

3. wordxml.jsp存储信息推荐的XML数据

a)初始代码如下(后期需修改):

<!-- 这个JSP返回的是XML数据,contentType的值是text/xml -->
<%@ pagelanguage="java" contentType="text/xml; charset=UTF-8"
    pageEncoding="utf-8"%>
<!-- 返回XML数据,将所有数据都返回,等待后台可以完整协作后再限制返回内容 -->
<words>
     <word>absolute</word>
     <word>anyone</word>
     <word>anything</word>
     <word>apple</word>
     <word>abandon</word>
     <word>breach</word>
     <word>break</word>
     <word>boolean</word>
</words>

4. AutoComplete.java后台Servlet

a)初始代码如下(为了简单起见Servlet不会进行判断操作,所以后面基本上也不会进行更改):

import java.io.IOException;
importjavax.servlet.RequestDispatcher;
importjavax.servlet.ServletException;
importjavax.servlet.http.HttpServlet;
importjavax.servlet.http.HttpServletRequest;
importjavax.servlet.http.HttpServletResponse;
/**
 * @author Ginger
 * 补全内容后台代码
 *接收用户请求
 */
public class AutoCompleteextends HttpServlet {
     @Override
     protected void doGet(HttpServletRequest req,HttpServletResponseresp)
                   throws ServletException,IOException {
            String word=req.getParameter("word");
//          将字符串保存在request对象中
            req.setAttribute("word",word);
//          请求转发到视图层
            RequestDispatchertemp=req.getRequestDispatcher("wordxml.jsp");
            temp.forward(req,resp);
     }
 
     @Override
     protected void doPost(HttpServletRequest req,HttpServletResponse resp)
                   throws ServletException,IOException {
            doGet(req,resp);
     }
}


二、接下来我们就对jqueryauto.js进行编写

代码功能可以根据功能和先后顺序分为:

1. 设置推荐文字弹出框auto的样式:

2. 设置按钮的点击事件:

3. 为输入文本框添加键盘事件

a)键盘事件分对当按下字母键、上下键、回车键时进行处理:

i.字母键:向后台提交文本框数据

ii.上下键:设置推荐文本被高亮的效果

iii.回车键:模拟按钮被点击的效果

4. 最终代码

//表示当前高亮的节点
var highlightindex=-1;
$(document).ready(function(){
//    根据输入框设置弹出框的样式
      var wordInput=$("#word");
      var wordInputOffset=wordInput.offset();
      //隐藏自动补全div框
      $("#auto").hide().css("border","1pxblack solid").css("position","absolute")
.css("top",wordInput.height()+wordInputOffset.top+"px").css("left",wordInputOffset.left+"px")
      .width(wordInput.width());
     
//    为文本框添加键盘按下并弹起事件
      $("#word").keyup(function(event){
//    处理文本框中的键盘事件
//    如果输入字母、退格键、删除键,则将信息发送到服务器    
      var myEvent=event || window.event;
      var keyCode=myEvent.keyCode;
      if(keyCode>=65&&keyCode<=90 || keyCode==8 ||keyCode==46){
      //     1.首先获取文本框内容
                    var wordText=$("#word").val();
      //     2.将内容发送给服务器(文本不为空的情况下才发送数据)
                    var autoNode=$("#auto");
                    if(wordText!=""){
                           $.post("AutoComplete",{word:wordText},function(data){
             //                   2.1转换dom对象为JQuery对象
                                  var jqueryObj=$(data);
             //                   2.2找到所有word节点
                                  varwordNodes=jqueryObj.find("word");
             //                   2.3遍历所有word节点,取出单词内容添加到auto弹出框中
             //                   每次提交数据前清空补全框数据
                                  autoNode.html("");
                                  $(wordNodes).each(function(i){
             //                          获取单词内容
                                         var wordNode=$(this);
//                                       将节点添加到弹出框中                                     autoNode.append($("<div>").html(wordNode.text()));
                                  });
                                  if(wordNodes.length >0){
                                         autoNode.show();
                                  }else{
                                         autoNode.hide();
                                  }                                 
                           },"xml");
                    }else{
                           autoNode.hide();
//                         隐藏弹出框同时重置高亮值
                           highlightindex=-1;
                    }
      }else if(keyCode==38 || keyCode==40){
//    如果输入上下按钮,则补全内容会被选中
             if(keyCode==38){
//                  向上
//                  找到当前补全框的所有子节点
                    varautoNodes=$("#auto").children("div");
                    if(highlightindex!=-1){
//                         如果原来存在高亮节点,则将背景改为白色
                           autoNodes.eq(highlightindex).css("background-color","white").css("color","black");
                           highlightindex--;
                    }else{
                           highlightindex=autoNodes.length-1;
                    }
                    if(highlightindex==-1){
//                         如果修改索引值后index变成-1,则将索引值指向最后一个元素
                           highlightindex=autoNodes.length-1;
                    }
                    autoNodes.eq(highlightindex).css("background-color","blue").css("color","white");
             }
             if(keyCode==40){
//                  向下
//                  找到当前补全框的所有子节点
                    varautoNodes=$("#auto").children("div");
                    if(highlightindex!=-1){
//                         如果原来存在高亮节点,则将背景改为白色
                           autoNodes.eq(highlightindex).css("background-color","black");
                    }
                    highlightindex++;
                    if(highlightindex==autoNodes.length){
//                         如果修改索引值后index变成-1,则将索引值指向最后一个元素
                           highlightindex=0;
                    }
                    autoNodes.eq(highlightindex).css("background-color","white");
             }     
      }else if(keyCode==13){
      //     如果输入回车
      //     补全框中有选中内容
             if(highlightindex!=-1){
                    varautoNodes=$("#auto").children("div");
      //            将高亮文本赋给输入框
                    $("#word").val(autoNodes.eq(highlightindex).text());
                    highlightindex=-1;
                    $("#auto").hide();
                    alert("已提交。");
             }else{
      //      补全框中没有选中内容
                    alert("已提交。");
                    $("#auto").hide();
             }
      }
      });
//    为按钮增加点击事件
      $("input[type='button']").click(function(){
             alert("已提交。");
      })
});

三、最后是在后台进行数据的筛选

最终wordxml.jsp代码

<!-- 这个JSP返回的是XML数据,contentType的值是text/xml -->
<%@ pagelanguage="java" contentType="text/xml; charset=UTF-8"
    pageEncoding="utf-8"%>
<!-- 返回XML数据,将所有数据都返回,等待后台可以完整协作后再限制返回内容 -->
<%
      String word=(String)request.getAttribute("word");
%>
<words>
      <% if("absolute".startsWith(word)){ %>
      <word>absolute</word>
      <%}%>
      <% if("anyone".startsWith(word)){ %>
      <word>anyone</word>
      <%}%>
      <% if("anything".startsWith(word)){ %>
      <word>anything</word>
      <%}%>
      <% if("apple".startsWith(word)){ %>
      <word>apple</word>
      <%}%>
      <% if("abandon".startsWith(word)){ %>
      <word>abandon</word>
      <%}%>
      <% if("breach".startsWith(word)){ %>
      <word>breach</word>
      <%}%>
      <% if("break".startsWith(word)){ %>
      <word>break</word>
      <%}%>
      <% if("boolean".startsWith(word)){ %>
      <word>boolean</word>
      <%}%>
</words>

Author:事始

Sign:只要你还在尝试。就不算失败。

原文链接:https://www.f2er.com/ajax/163224.html

猜你在找的Ajax相关文章