好久没有继续看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. 简约之美jodd--props属性使用

    Prop是一个超级properties:包含了很多jdk缺失的东西:utf-8支持,宏,分区,profiles,全配置等等. 属性存储在一个或者多个*.props文件,而且它是开放的,支持多种类型的资 ...

  2. 使用Iperf调整网络

    使用Iperf调整网络     Iperf 是一个 TCP/IP 和 UDP/IP 的性能测量工具,通过调谐各种参数可以测试TCP的最大带宽,并报告带宽.延迟,最大段和最大传输单元大小等统计信息.Ip ...

  3. ASP.NET MVC 4 (十一) Bundles和显示模式--asp.net mvc中 @Scripts.Render("~/bundles/jquery")是什么意思? 在布局文件中使用Scripts.Render()输出脚本包，Styles.Render()输出风格包：

    ASP.NET MVC 4 (十一) Bundles和显示模式 ASP.NET MVC 4 引入的js打包压缩功能.打包压缩jquery目录下的文件,在布局文件中使用Scripts.Render()输 ...

  4. 解决eclipse端口被占用的问题

    问题如图所示,在eclipse中开启tomcat服务器时报错:端口已被占用. 这是因为在tomcat开启的状态下,eclipse异常关闭,导致tomcat一直占用端口. 解决办法如下: 1: 输入命令 ...

  5. 理解宏的使用 extern

    如何定义一个全局变量在一个文件中,然后在其它文件中调用就行,而不需要多次extern外部声明. 由于之前的公司的程序中全局的变量使用得很多,在多个.C文件中会调用,不这样处理做的话就会多处进行exte ...

  6. Eclipse工具修理集

    本文来自http://blog.csdn.net/liuxian13183/ ,引用必须注明出处! 俗话说:工欲善其事.必先利其器,eclipse偶尔会发发脾气,那我们要记录下"她" ...

  7. 在 Android* 商务应用中实施地图和地理围栏特性

    摘要 本案例研究讨论了怎样将地图和地理定位特性构建到 Android* 商务应用中.包含在 Google Maps* 上覆盖商店位置,以及在设备进入商店地理围栏邻近区域时借助地理围栏通知用户. 文件夹 ...

  8. Express框架是什么

    Express框架是什么 一.总结 1.express框架:基于node.js的web应用框架,可快速搭建一个完整功能的网站,丰富的HTTP工具以及来自Connect框架的中间件随取随用. 二.Exp ...

  9. 韦东山网课https://edu.csdn.net/course/play/207/1117

    接口讲解https://edu.csdn.net/course/play/207/1117

  10. Eclipse如何从导入SVN上导入项目

    1.右键单击,选择 Import,进入导入项目窗口 2.点击选择从SVN检出项目,点击Next下一步 3.选择创建新的资源库位置,点击Next,如果项目之前已经导入过删除掉了,重新导入的时候,只需勾选 ...