好久没有继续看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. SVN和Git代码管理小结

    SVN和Git代码管理小结  之前,先用的是SVN,后来用了Git,最近又在用SVN.  关于代码管理,写几句.    由于自己参与的项目,人通常不超过10个人,版本不是很多,协作比较正常,感觉SVN ...

  2. 【Codeforces Round #453 (Div. 2) A】 Visiting a Friend

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 维护最右端的端点就好. [代码] #include <bits/stdc++.h> using namespace st ...

  3. 【2017"百度之星"程序设计大赛 - 初赛（B）】Chess

    [链接]http://bestcoder.hdu.edu.cn/contests/contest_showproblem.php?cid=776&pid=1001 [题意] 在这里写题意 [题 ...

  4. android:一个Open键引发的问题！！

    1.问题简单介绍 首先描写叙述一下问题.当我们安装完APP的时候,界面会显示两个button,一个完毕键,一个Open键,点击Open键之后.进入应用.此时.我们点击HOME键.程序将会后台.然后再点 ...

  5. 前端面试题（webpack）

    (前端面试题大全,持续更新) webpack3升级到4为什么会提升速度? webpack优化有哪些? webpack的css-loader原理讲一下 webpack压缩js css的方法

  6. js进阶 13-9/10 jquery如何实现三级列表

    js进阶 13-9/10 jquery如何实现三级列表 一.总结 一句话总结:用的是定位,父标签相对定位,子标签就可以绝对定位了,绝对定位的孩子还是可以设置绝对定位.用toggle设置子菜单显示和隐藏 ...

  7. 电脑c盘清理

    https://www.cnblogs.com/btchenguang/archive/2012/01/20/2328320.html

  8. 深度解析VC中的消息（转发）

    http://blog.csdn.net/chenlycly/article/details/7586067 这篇转发的文章总结的比较好,但是没有告诉我为什么ON_MESSAGE的返回值必须是LRES ...

  9. qemu 参数简介

    参数 示例 说明 -hda -hda /data/windows.img 指定windows.img作为硬盘镜像 -cdrom -cdrom /data/windows.iso 指定windows.i ...

  10. <一> 爬虫的原理

    一.爬虫是什么? #1.什么是互联网? 互联网是由网络设备(网线,路由器,交换机,防火墙等等)和一台台计算机连接而成,像一张网一样. #2.互联网建立的目的? 互联网的核心价值在于数据的共享/传递:数 ...