好久没有继续看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. JS / CSS 实现的便签记录本

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  2. 洛谷 P1194 买礼物

    洛谷 P1194 买礼物 题目描述 又到了一年一度的明明生日了,明明想要买B样东西,巧的是,这B样东西价格都是A元. 但是,商店老板说最近有促销活动,也就是: 如果你买了第II样东西,再买第J样,那么 ...

  3. 【2017 Multi-University Training Contest - Team 9】FFF at Valentine

    [链接]http://acm.hdu.edu.cn/showproblem.php?pid=6165 [题意] 一张有向图,n个点,m条边,保证没有重边和自环.询问任意两个点能否满足任何一方能够到达另 ...

  4. Native开发与JNI机制详解

    本文来自http://blog.csdn.net/liuxian13183/ ,引用必须注明出处! 文/李森 博主导读:博主不是代码大师,研究什么都很深,Java除外,所以无论什么问题,方案可以提供, ...

  5. 关于后台接收参数为null的问题之ajax--contentType

    ajax方法中的参数: contentType:发送至服务器时内容的编码类型,一般默认:application/x-www-form-urlencoded(适应大多数的场合) dataType:预期服 ...

  6. 目标跟踪系列十一：Exploiting the Circulant Structure of Tracking-by-detection with Kernels代码思路

    Tracking学习系列原创,转载标明出处: http://blog.csdn.net/ikerpeng/article/details/40144497 这篇文章非常赞啊!非常有必要将其好好的学习, ...

  7. 编译安装PHP-7.2.8

    一 下载并软件包 wget http://124.205.69.169/files/A218000006E9730A/cn2.php.net/distributions/php-7.2.8.tar.g ...

  8. TC Hangs when using quick search extended on win10 (1703)

    https://ghisler.ch/board/viewtopic.php?t=47682 I recently updated windows 10 to the latest released ...

  9. PatentTips - Method, apparatus and system for instructing a virtual device from a virtual machine

    BACKGROUND OF THE INVENTION A virtual machine (VM) may be or include a framework or environment crea ...

  10. 2018VMware虚拟机安装Mac OS 10.12.1

    说明:该篇博客是博主一字一码编写的,实属不易,请尊重原创,谢谢大家! 一.下载安装中所需的镜像文件以及补丁工具 Mac OS 10.12.1 Sierra (16B2555) 懒人版(下载地址):ht ...