好久没有继续看AJAX的视频教程了,今天就将最后一个教程案例做完。我们在搜索引擎中输入文字时文本框下会提示对应的信息，这个案例就是实现这样的基本功能，代码比較粗糙还须要进一步完好，当中有些地方也须要向大神们请教一下。完毕效果截图：

一、事先代码准备工作：

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

a)     截图例如以下：

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvTFpHU180/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

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.   设置button的点击事件：

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

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

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

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

iii.         回车键：模拟button被点击的效果

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){

//    处理文本框中的键盘事件

//    假设输入字母、退格键、删除键，则将信息发送到server

      var myEvent=event || window.event;

      var keyCode=myEvent.keyCode;

      if(keyCode>=65&&keyCode<=90 || keyCode==8 ||keyCode==46){

      //     1.首先获取文本框内容

                    var wordText=$("#word").val();

      //     2.将内容发送给server(文本不为空的情况下才发送数据)

                    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){

//    假设输入上下button，则补全内容会被选中

             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","white").css("color","black");

                    }

                    highlightindex++;

                    if(highlightindex==autoNodes.length){

//                         假设改动索引值后index变成-1，则将索引值指向最后一个元素

                           highlightindex=0;

                    }

                    autoNodes.eq(highlightindex).css("background-color","blue").css("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();

             }

      }

      });

//    为button添加点击事件

      $("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：仅仅要你还在尝试。

就不算失败。

【AJAX】AJAX实现搜索信息自己主动推荐并补全的更多相关文章

  1. [转]Sublime Text 新建文件快速生成Html【头部信息】和【代码补全】、【汉化】

    Sublime Text 新建文件快速生成Html[头部信息]和[代码补全].[汉化] 真心越来越喜欢sublime 这个工具,高效便捷,渐渐离不了了! 安装package control简单的安装方 ...

  2. [tool] google搜索的正确使用姿势(待补全)

    第一,也是非常重要的前提,请一定要能FQ.如果这条没有解决,没有往下的必要 现在我假设你已经能FQ了,个人推荐使用搜索引擎的顺序: Google>微软bing国际搜索>百度 (百度总能给你 ...

  3. vim：隆重推荐括号补全插件--auto-pairs

    太好用了,括号相关的各种麻烦都一一解决,剩下的就是熟练,熟练,在熟练了.呵呵 连教程都做得这么好,先放这里,以后慢慢翻译. Auto Pairs Insert or delete brackets, ...

  4. MSClass 和setInterval 的并发，ajax定时有采集信息滚动显示

    setTimeout 用于延时器,只执行一次. setInterval:用于多次执行. //****************************************** 项目中引用到jquer ...

  5. jquery通过AJAX从后台获取信息并显示在表格上的类

    前一阵我写了:<jquery通过AJAX从后台获取信息并显示在表格上,并支持行选中.>现在,我把他们处理了一下,不需要每次写代码了: 具体代码如下: //获取数据并显示数据表格 funct ...

  6. jquery通过AJAX从后台获取信息并显示在表格上，并支持行选中

    不想用Easyui的样式,但是想要他的表格功能,本来一开始是要到网上找相关插件的,但是没找到就开始自己写,没想到这么简单. 后台代码:(这个不重要) public ActionResult GetDi ...

  7. Django中,ajax检测注册用户信息是否可用?

    ajax检测注册用户信息主体思路 1.在settings.py中配置需要使用的信息 #对static文件进行配置 STATICFILES_DIRS=[ os.path.join(BASE_DIR,'s ...

  8. 第三百三十四节，web爬虫讲解2—Scrapy框架爬虫—Scrapy爬取百度新闻，爬取Ajax动态生成的信息

    第三百三十四节,web爬虫讲解2—Scrapy框架爬虫—Scrapy爬取百度新闻,爬取Ajax动态生成的信息 crapy爬取百度新闻,爬取Ajax动态生成的信息,抓取百度新闻首页的新闻rul地址 有多 ...

  9. 十三 web爬虫讲解2—Scrapy框架爬虫—Scrapy爬取百度新闻，爬取Ajax动态生成的信息

    crapy爬取百度新闻,爬取Ajax动态生成的信息,抓取百度新闻首页的新闻rul地址 有多网站,当你浏览器访问时看到的信息,在html源文件里却找不到,由得信息还是滚动条滚动到对应的位置后才显示信息, ...

随机推荐

  1. golang sync.Mutex(2)

    package main import ( "fmt" "sync" "time" ) type User struct { Name st ...

  2. interpolator-动画执行方式

    动画中有一个属性是设置动画执行的方式, <?xml version="1.0" encoding="utf-8"?> <set xmlns:a ...

  3. Project Euler 435 Polynomials of Fibonacci numbers (矩阵快速幂)

    题目链接: https://projecteuler.net/problem=435 题意: The Fibonacci numbers $ {f_n, n ≥ 0}$ are defined rec ...

  4. Vue 自定义全局消息框组件

    消息弹框组件,默认3秒后自动关闭,可设置info/success/warning/error类型 效果图: 文件目录: Message.vue <template> <transit ...

  5. javascript保存变量到本地文件

    最近用echarts在做可视化,好多实例都有一大堆数据,想着把数据保存到本地,有什么比较方便又可靠的办法呢? 将下边代码粘贴到浏览器的控制台 (function(console){ console.s ...

  6. (最新)使用爬虫刷CSDN博客访问量——亲测有效

    说明:该篇博客是博主一字一码编写的,实属不易,请尊重原创,谢谢大家! 1.概述 前言:前两天刚写了第一篇博客https://blog.csdn.net/qq_41782425/article/deta ...

  7. web服务器软件（Nginx，Apache，IIS，Lighttpd）介绍

    Nginx是一款轻量级的Web 服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器,并在一个BSD-like 协议下发行.其特点是占有内存少,并发能力强,事实上nginx的并发能力确实在 ...

  8. Java基础学习总结（51）——JAVA分层理解

    service是业务层  action层即作为控制器 DAO (Data Access Object) 数据访问   1.JAVA中Action层, Service层 ,modle层 和 Dao层的功 ...

  9. （素材源代码） 猫猫学IOS（五）UI之360等下载管理器九宫格UI

    猫猫分享,必须精品 先看效果 代码学习地址: 猫猫学IOS(五)UI之360等下载管理器九宫格UI 猫猫学IOS(五)UI之360等下载管理器九宫格UI http://blog.csdn.net/u0 ...

  10. CSU1656: Paper of FlyBrother(后缀数组)

    Description FlyBrother is a superman, therefore he is always busy saving the world.  To graduate fro ...