简介：搜索框相信大家都不陌生，几乎每天都会在各类网站进行着搜索。有没有注意到，很多的搜索功能，当输入内容时，下面会出现提示。这类提示就叫做搜索框的智能提示，本门课程就为大家介绍如何使用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. 数据库系统（六）---MySQL语句及存储过程

    一.DDL.DML.DCL常用语句 1.DDL(Data Definition Language)数据库定义语言 (1)数据库模式定义 #创建数据库 create database if exsite ...

  2. Spring IoC的概念

    Spring IoC的基础知识 Spring 框架可以说是Java世界中最成功的框架,它的成功来自于理念,而不是技术,它最核心的理念是IoC(控制反转)和AOP(面向切面编程),其中IoC是Sprin ...

  3. MongoDB分页查询优化方法

    在网上看到很多关于MongoDB分页查询优化的文章,如出一辙.笔者自己实际生产中也遇到此问题,所以看了很多篇文章,这里分享一篇简明扼要的文章分享给大家,希望对大家在使用MongoDB时有所帮助. 凡事 ...

  4. 关于./xhost: unable to open display问题的解决

    看了很多大同小异的帖子,都没能解决这个问题,以下是我的实测经验,注意第三步,很关键. 注:以下操作在确保vncserver.xdpyinfo服务正常的情况下进行 第一步:root登录,启动vncser ...

  5. SYZOJ中文安装指南

    Made By:Spaceskynet Thanks to other developers. 测试系统 Ubuntu-17.04 PS(全局变量): [syzoj2 path] = 您git的syz ...

  6. phpstudy 升级mysql到mysql5.7

    前言 今天在工作发现一个错误,在往本地导数据表的时候老是报错: ? 1 [Err] 1294 - Invalid ON UPDATE clause for '字段名' column 报错的数据表字段: ...

  7. 基于 Jenkins Pipeline 自动化部署

    最近在公司推行Docker Swarm集群的过程中,需要用到Jenkins来做自动化部署,Jenkins实现自动化部署有很多种方案,可以直接在jenkins页面写Job,把一些操作和脚本都通过页面设置 ...

  8. css3软键盘不盖住输入框的方法

    css3软键盘不盖住输入框的方法 弹出软键盘的时候 最外面的容器高度就发生了变化 要减去软键盘高度了<pre>var bodyheight bodyheight = $('body').h ...

  9. windows中修改IP映射的位置

    windows中修改IP映射的位置 置顶 2018年08月05日 14:42:44 wangxiaolong0 阅读数:1473   在安装linux之后,发现windows不能通过映射来访问linu ...

  10. Jenkins+pipeline+参数构建+人工干预确定

    Jenkins+pipeline+参数构建+人工干预 实现了以下功能 1. 可以选择环境,单选:可以选择需要发布的项目,多选 2.发布过程可视化 3. 可以人工干预是否继续发布. 初始化配置需要很久, ...