简介：搜索框相信大家都不陌生，几乎每天都会在各类网站进行着搜索。有没有注意到，很多的搜索功能，当输入内容时，下面会出现提示。这类提示就叫做搜索框的智能提示，本门课程就为大家介绍如何使用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. Linux CentOS7部署ASP.NET Core应用程序，并配置Nginx反向代理服务器

    前言: 本篇文章主要讲解的是如何在Linux CentOS7操作系统搭建.NET Core运行环境并发布ASP.NET Core应用程序,以及配置Nginx反向代理服务器.因为公司的项目一直都是托管在 ...

  2. 星空 题意转化，差分，状压DP

    好题(爆搜和puts("2")一个分(雾)),不得不说思维真的强. 首先发现区间翻转很难受,考虑用差分(异或满足可逆性),注意是从0到n+1 然后就转化题意,操作改为选取距离为L的 ...

  3. vue自定义长按指令

    1.前言 在word中,当我们需要删除一大段文本的时候,我们按一下键盘上的退格键,就会删除一个字,当我们长按住退格键时,就会连续不停的删除,这就是键盘按键的长按功能.那么我们也想在网页中让一个按钮也具 ...

  4. 决策树(上)-ID3、C4.5、CART

    参考资料(要是对于本文的理解不够透彻,必须将以下博客认知阅读,方可全面了解决策树): 1.https://zhuanlan.zhihu.com/p/85731206 2.https://zhuanla ...

  5. PHP 从另一个角度来分析 Laravel 框架的依赖注入功能

    从根本上说,依赖注入不是让对象创建一个依赖关系,也不是让工厂对象去创建对象,而是将所需的依赖变成一个外部对象,使之成为一个"某些人的问题” 你为"某些人的问题”注入了类的依赖关系. ...

  6. Java多态——代码示例

    刚开始看多态的文字定义时,总是不明白说的啥意思,看了一些示例代码后,总算知道了,其实也就是“多态”的字面意思. 如下: class A{ public void Out() { System.out. ...

  7. 基于@Scheduled注解的Spring定时任务

    1.创建spring-task.xml 在xml文件中加入命名空间 <beans xmlns="http://www.springframework.org/schema/beans& ...

  8. nyoj 811-变态最大值 (max)

    811-变态最大值 内存限制:64MB 时间限制:1000ms 特判: No 通过数:6 提交数:15 难度:1 题目描述: Yougth讲课的时候考察了一下求三个数最大值这个问题,没想到大家掌握的这 ...

  9. React组件间的通讯

    组件化开发应该是React核心功能之一,组件之间的通讯也是我们做React开发必要掌握的技能.接下来我们将从组件之间的关系来分解组件间如何传递数据. 1.父组件向子组件传递数据 通讯是单向的,数据必须 ...

  10. 领扣（LeetCode）3的幂 个人题解

    给定一个整数,写一个函数来判断它是否是 3 的幂次方. 示例 1: 输入: 27 输出: true 示例 2: 输入: 0 输出: false 示例 3: 输入: 9 输出: true 示例 4: 输 ...