简介：搜索框相信大家都不陌生，几乎每天都会在各类网站进行着搜索。有没有注意到，很多的搜索功能，当输入内容时，下面会出现提示。这类提示就叫做搜索框的智能提示，本门课程就为大家介绍如何使用Servlet和Ajax来实现。主要介绍实现原理和代码的前后台实现过程。

项目结构

  

首先我们需要先导入以上5个jar包，当然也可以选择maven工程导入相关依赖。

jar包链接：https://pan.baidu.com/s/1MZATGVtahTiKp-B7GYIKUg
 提取码：701k
　

代码实现

SearchServlet.java

import com.alibaba.fastjson.JSON;

import com.alibaba.fastjson.JSONArray;

import javax.servlet.ServletException;

import javax.servlet.annotation.WebServlet;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import java.io.IOException;

import java.util.ArrayList;

import java.util.List;

public class SearchServlet extends HttpServlet {

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

    }

    static List<String> list=new ArrayList<>();

    static {

        list.add("ajax");

        list.add("ajax post");

        list.add("bad");

        list.add("bill");

        list.add("james");

        list.add("jerry");

    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        //System.out.println("123");

        response.setCharacterEncoding("utf-8");

        request.setCharacterEncoding("utf-8");

        String keyword=request.getParameter("keyword");

        //得到关联数据

        List<String> listData=getData(keyword);

        //返回json格式

        System.out.println(JSONArray.toJSONString(listData));

        response.getWriter().write(JSONArray.toJSONString(listData).toString());

    }

    public List<String> getData(String keyword){

        List<String> data=new ArrayList<>();

        for(String s:list){

            if(s.contains(keyword)){

                data.add(s);

            }

        }

        return data;

    }

}

　

index.jsp

<%--

  Created by IntelliJ IDEA.

  User: Crush

  Date: 2019/7/19

  Time: 17:09

  To change this template use File | Settings | File Templates.

--%>

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>

  <head>

    <style type="text/css">

      #mydiv{

        position: absolute;

        left: 50%;

        top:50%;

        margin-left: -250px;

        margin-top: -50px;

      }

      #keyword{

        height: 30px;

      }

      #baidu{

        height: 30px;

        background-color: #3388FF;

      }

    .mouseOver{

        background: #708090;

        color:white;

    }

    .mouseOut{

        background: white;

        color: #000000;

    }

    </style>

    <script type="text/javascript">

        var xmlHttp;

        function getMoreContents() {

            //获得用户输入信息的关联函数

            var content=document.getElementById("keyword");

            if(content.value==""){

                clearContent();

                return;

            }

            //alert(content)

            //然后给服务器发送输入内容，Ajax异步发送

            //使用xmlhttp对象

            xmlHttp=createXmlHttp();

            //alert(xmlHttp)

            //要给服务器发送数据

            var url="search?keyword="+escape(content.value);//escape防止中文

            xmlHttp.open("GET",url,true);

            //true表示javascript脚本会在send方法之后继续执行，不会等待服务器响应

            //xmlhttp绑定回调方法，xmlhttp状态改变的时候被调用，出发回调函数，只关心4这个状态

            //当完成之后在调用才有意义

            xmlHttp.onreadystatechange=callback;

            xmlHttp.send(null);

        }

        function createXmlHttp() {

            //获得xmlhttp对象

            //大多数浏览器使用的

            var xmlHttp;

            if(window.XMLHttpRequest){

                xmlHttp=new XMLHttpRequest();

            }

            //考虑浏览器的兼容性

            if(window.ActiveXObject){

                xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");

                if(!xmlHttp){

                    xmlHttp=new ActiveXObject("Mscxml2.XMLHTTP")

                }

            }

            return xmlHttp;

        }

        //回调函数

        function callback() {

            //4代表完成

            if(xmlHttp.readyState==4){

                //200代表服务器相应成功

                if(xmlHttp.status==200){

                    //交互成功获得相应的数据，文本格式

                    var result=xmlHttp.responseText;

                    //解析获得的数据

                    var json=eval("("+result+")");

                    //获得数据后，可以动态的显示这些数据，展示在输入框下面

                    //alert(json);

                    //显示在输入框下

                    setContent(json);

                }

            }

        }

        //设置关联数据的展示

        function setContent(contents) {

            clearContent();

            setLocation();

            //获得关联数据的长度，来确定生成多少<tr></tr>

            var size=contents.length;

            for(var i=0;i<size;i++){

                var nextNode=contents[i];

                var tr=document.createElement("tr");

                var td=document.createElement("td");

                td.setAttribute("border","0");

                td.setAttribute("bgcolor","#FFFAFA");

                td.onmouseover=function () {

                    this.className="mouseOver";

                };

                td.onmouseout=function () {

                    this.className="mouseOut";

                };

                td.onmousedown=function(){

                    //这个方法实现当鼠标点击一个关联的数据时,关联数据自动设置为输入框的数据

                    document.getElementById("keyword").value=this.innerHTML;

                };

                var text=document.createTextNode(nextNode);

                td.appendChild(text);

                tr.appendChild(td);

                document.getElementById("content-table-body").appendChild(tr);

            }

        }

        function clearContent() {

            //清空之前的数据

            var contentTableBody=document.getElementById("content-table-body");

            var size=contentTableBody.childNodes.length;

            for(var i=size-1;i>=0;i--){

                contentTableBody.removeChild(contentTableBody.childNodes[i])

            }

            document.getElementById("popDiv").style.border="none";

        }

        function keyWordBlur() {

            //当失去焦点的时候关联信息清空

            clearContent();

        }

        function setLocation() {

            //关联信息的显示位置要与输入框一致

            var content=document.getElementById("keyword");

            var width=content.offsetWidth-1.5;//输入框的宽度

            var left=content["offsetLeft"];//道左边框的距离

            var top=content["offsetTop"];//到顶部的距离

            //获得显示数据的div

            var popDiv=document.getElementById("popDiv");

            popDiv.style.border="black 1px solid";

            popDiv.style.left=left+"px";

            popDiv.style.top=top+"px";

            popDiv.style.width=width+"px";

            document.getElementById("content-table").style.width=width+"px";

       }

    </script>

    <title>百度一下</title>

  </head>

  <body>

  <div id="mydiv">

    <input type="text" size="50" id="keyword" onkeyup="getMoreContents()" onblur="keyWordBlur()" onfocus="getMoreContents()"/>

    <input type="button" value="百度一下" id="baidu" width="50px"/>

      <%--下面是内容展示的区域--%>

    <div id="popDiv">

          <table id="content-table" bgcolor="#FFFAFA" border="0"cellspacing="0" cellpadding="0">

              <tbody id="content-table-body">

              <%--动态查询出来的数据显示在这里--%>

              </tbody>

          </table>

    </div>

  </div>

  </body>

</html>

　

web.xml

<?xml version="1.0" encoding="UTF-8"?>

<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"

         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"

         version="4.0">

    <welcome-file-list>

        <welcome-file>/index.jsp</welcome-file>

    </welcome-file-list>

    <servlet>

        <servlet-name>search</servlet-name>

        <servlet-class>SearchServlet</servlet-class>

    </servlet>

    <servlet-mapping>

        <servlet-name>search</servlet-name>

        <url-pattern>/search</url-pattern>

    </servlet-mapping>

</web-app>

　　

运行效果

版权声明：本文为博主原创文章，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/rong0912/p/11906909.html

Servlet+Ajax实现搜索框智能提示的更多相关文章

  1. 使用jsonp跨域调用百度js实现搜索框智能提示，并实现鼠标和键盘对弹出框里候选词的操作【附源码】

    项目中常常用到搜索,特别是导航类的网站.自己做关键字搜索不太现实,直接调用百度的是最好的选择.使用jquery.ajax的jsonp方法可以异域调用到百度的js并拿到返回值,当然$.getScript ...

  2. 使用jsonp跨域调用百度js实现搜索框智能提示（转）

    http://www.cnblogs.com/oppoic/p/baidu_auto_complete.html 项目中常常用到搜索,特别是导航类的网站.自己做关键字搜索不太现实,直接调用百度的是最好 ...

  3. Ternary Search Tree 应用--搜索框智能提示

    前面介绍了Ternary Search Tree和它的实现,那么可以用Ternary Search Tree来实现搜索框的只能提示,因为Ternary Search Tree的前缀匹配效率是非常高的, ...

  4. jquery php 百度搜索框智能提示效果

    这个程序是利用php+ajax+jquery 实现的一个仿baidu智能提示的效果,有须要的朋友能够下载測试哦. 代码例如以下 index.html文件,保保存成index.htm <!DOCT ...

  5. ajax实现异步前后台交互，模拟百度搜索框智能提示

    1.什么是异步?在传统的网站项目中,填写一堆数据,最后点击提交,在点击提交的这一刻才实现数据提交,前后台交互.在你点击提交之前数据是没有提交到后台的.这样就会造成很大的不便.比如,我填了一大堆数据,结 ...

  6. Servlet+Ajax实现搜索智能提示

    一般在百度搜索框输入关键词时,会弹出一些相关信息提示,方便点选: 页面(search.jsp): <input type="text" name="keyWords ...

  7. 搜索关键词智能提示suggestion

    转载自:stormbjm的专栏 题目详情:百度搜索框中,输入“北京”,搜索框下面会以北京为前缀,展示“北京爱情故事”.“北京公交”.“北京医院”等等搜索词,输入“结构之”,会提示“结构之法”,“结构之 ...

  8. jquery+ajax 实现搜索框提示

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. Jquery 搜索框自动提示

    为文本框增加自动提示下拉功能,比如输入 1,则从后台数据库查询出包含1 的字段,在文本框增加下拉列表供用户选择 ajax 返回数据为搜索查询字段的json集合 <script src=" ...

随机推荐

  1. foreach数组并直接改变数组内容

    <?php $arr = array(1, 2, 3, 4); foreach ($arr as &$value) { $value = $value * 2; } // $arr is ...

  2. Java编程思想——第14章 类型信息（一）

    运行时类型信息使得你可以在程序运行时发现和使用类型信息.Java是如何让我们在运行时识别对象和类的信息得呢? 主要有两种方式:1.传统RTTI,他假定我们在编译期间已经知道了所有类型:2.反射,它允许 ...

  3. 求和：fft，表达式化简

    $f(n)=\sum\limits_{i=0}^{n} \sum\limits_{j=0}^{i} S(i,j) \times 2^j \times j!$ 其中$S(i,j)$为第二类斯特林数,公式 ...

  4. 使用Typescript重构axios(十八)——请求取消功能：总体思路

    0. 系列文章 1.使用Typescript重构axios(一)--写在最前面 2.使用Typescript重构axios(二)--项目起手,跑通流程 3.使用Typescript重构axios(三) ...

  5. 安全路径——最短路径树+dsu缩边

    题目描述 思路 首先想到$dijkstra$跑完之后$build$一棵最短路径树.要找到每个节点i到根的满足要求的最短路,考虑把一些非树边加进去. 对于非树边$(u,v)$,因为节点i上方的边被占领, ...

  6. Box 黑科技 —— 支持手机端反编译 ！Box 黑科技 —— 支持手机端反编译 ！

    项目地址: Box 文末扫码获取最新安装包 . 前言 有将近一个月没有更新文章了,一方面在啃 AOSP ,消化起来确实比较慢.在阅读的过程中,有时候上来就会陷入源码细节,其实这是没有必要的.刚开始更多 ...

  7. 关闭redis持久化功能

    关闭redis持久化功能持久化会报如下信息 会影响硬盘写入性能 所以没什么用 就关掉吧 修改redis配置文件,redis.conf 第115行左右. 1.注释掉原来的持久化规则 <pre> ...

  8. k8s部署高可用Ingress

    部署高可用Ingress 官网地址https://kubernetes.github.io/ingress-nginx/deploy/ 获取ingress的编排文件 wget https://raw. ...

  9. 人人都懂区块链--pdf电子版学习资料下载

    人人都懂区块链 21天从区块链“小白”到资深玩家电子版pdf下载 链接:https://pan.baidu.com/s/1TWxYv4TLa2UtTgU-HqLECQ 提取码:6gy0 好的学习资料需 ...

  10. ESP 8266 引脚图

    ESP 8266 引脚图