好久没有继续看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. 一个理性战胜感性的成功案例：P2P投资和活期理财，纠结中提炼出来的1个数学问题

    我经常是投资了P2P,然后用钱,因而损失了一部分收益. 这是一个让我纠结的问题,为了解决这个问题,我不再凭感觉,而是从现实情况,提炼出来1个数学题,解答我的疑惑. 这是一个理性战胜感性的成功案例~ P ...

  2. J2SE核心开发实战(一）——认识J2SE

    认识J2SE 一.课程简单介绍 在本章学习開始前,你应该具备一些Java的基础知识. 我们将在本章来认识J2SE,并复习一下前面学过的面向对象的相关知识. 注:全部的蓝色文字都是带超链接的,这些链接是 ...

  3. JS 数字格式千分位相互转换

    /** * 将数值四舍五入后格式化. * * @param num 数值(Number或者String) * @param cent 要保留的小数位(Number) * @param isThousa ...

  4. PatentTips - Method and Apparatus to Support Virtualization with Code Patches

    BACKGROUND As recognized in Revision 2.0 of the Intel® Virtualization Technology Specification for t ...

  5. leetCode 103.Binary Tree Zigzag Level Order Traversal （二叉树Z字形水平序） 解题思路和方法

    Given a binary tree, return the zigzag level order traversal of its nodes' values. (ie, from left to ...

  6. Qt Creator 源码学习 03：qtcreator.pro

    当我们准备好 Qt Creator 的源代码之后,首先进入到它的目录,来看一下它的源代码目录有什么奥秘. 这里一共有 9 个文件夹和 9 个文件.我们来一一看看它们都是干什么用的. .git: 版本控 ...

  7. TCP超时重传机制

    TCP协议在能够发送数据之前就建立起了"连接".要实现这个连接,启动TCP连接的那一方首先将发送一个SYN数据包.这只是一个不包含数据的数据包, 然后,打开SYN标记.如果另一方同 ...

  8. 并发，one

    引言 最近工作当中写了一个有关并发的程序,引起了LZ对并发的强烈兴趣.这一下一发不可收拾,LZ用了一个多星期,看完了这本共280+页的并发编程书.之所以能看这么快,其实这主要归功于,自己之前对并发就有 ...

  9. HTTP--Request Headers及Cookies

    简介: HTTP客户程序(例如浏览器),向服务器发送请求的时候必须指明请求类型(一般是GET或者POST).如有必要,客户程序还可以选择发送其他的请求头.大多数请求头并不是必需的,但Content-L ...

  10. 关于mysql事务行锁for update实现写锁的功能

    关于mysql事务行锁for update实现写锁的功能 读后感:用切面编程的理论来讲,数据库的锁对于业务来说是透明的.spring的事务管理代码,业务逻辑代码,表锁,应该是三个不同的设计层面. 在电 ...