简介：搜索框相信大家都不陌生，几乎每天都会在各类网站进行着搜索。有没有注意到，很多的搜索功能，当输入内容时，下面会出现提示。这类提示就叫做搜索框的智能提示，本门课程就为大家介绍如何使用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. PHP比较IP大小

    function cmpLoginIP($a, $b) { return bindec(decbin(ip2long($a['loginIp']))) > bindec(decbin(ip2lo ...

  2. SQL语句实现：当A列大于B列时选择A列否则选择B列，当B列大于C列时选择B列否则选择C列

    分享一道今天的面试题:SQL语句实现:数据库中有A B C三列,当A列大于B列时选择A列否则选择B列,当B列大于C列时选择B列否则选择C列 第一种:使用case when...then...else ...

  3. NOIP201605玩具谜题-解题报告

    NOIP201605玩具谜题-解题报告                                                                         2019-11- ...

  4. 建议收藏：.net core 使用导入导出Excel详细案例，精心整理源码已更新至开源模板

    还记得刚曾经因为导入导出不会做而发愁的自己吗?我见过自己前同事因为一个导出改了好几天,然后我们发现虽然有开源的库但是用起来却不得心应手,主要是因为百度使用方案的时候很多方案并不能解决问题. 尤其是尝试 ...

  5. 学习笔记51_MongoDB使用

    MongoDB的包: 例如:设置Mongodb端口 在命令行: F:\MongoDB>mongod.exe --port:3306 做集群: 安装和使用: 1.在服务中添加MongoDB ( 指 ...

  6. Ubuntu18.04 安装在VMware 14中无法全屏问题解决

    现象:在安装完Ubuntu18.04后发现在虚拟机中不能全屏,安装Vmware Tools后还是无法解决,修改分辨率亦不成功. 原因:WAYLAND限制 解决方法:取消ubuntu中的显示设备WAYL ...

  7. DZY Loves Math II:多重背包dp+组合数

    Description Input 第一行,两个正整数 S 和 q,q 表示询问数量.接下来 q 行,每行一个正整数 n. Output 输出共 q 行,分别为每个询问的答案. Sample Inpu ...

  8. 分类算法之逻辑回归（Logistic Regression

    分类算法之逻辑回归(Logistic Regression) 1.二分类问题 现在有一家医院,想要对病人的病情进行分析,其中有一项就是关于良性\恶性肿瘤的判断,现在有一批数据集是关于肿瘤大小的,任务就 ...

  9. winds添加静态路由

    如上图所示,wan口设备箱访问路由器栏口设备 route -p add 192.168.21.0 mask 255.255.255.0  192.168.0.176 -p 表示永久路由,重启后不丢失 ...

  10. C++中对封装的语法支持——友元

    友元 1.友元就是授权给某个函数.每个成员函数.某个类具有访问类内部私有成员的权限. 2.为什么用友元?友元可以允许某个类.函数直接访问类内部私有数据,减少函数调用开销,提高效率. 3.友元函数不是成 ...