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

    前台 <script type="text/javastript"> $(fuction(){ $("#btnsub").click(fuction ...

  2. 「卡常」我T死了我好桑心，我不会卡常。

    我死了我死了我死了 puts(“Lrefrain==T”)

  3. 我是个sb

  4. 测试工程师，选择python还是java？

    问:“你平时工作中,用java多还是用python多”? 答:“都还可以,根据具体的场景选择不同的语言”. 问:“比如说呢”? 答:“开发自己的测试平台,肯定会选择java:在centos服务器跑一些 ...

  5. 数据结构--树链剖分准备之LCA

    有关LCA的模板题    传送门 题目描述 如题,给定一棵有根多叉树,请求出指定两个点直接最近的公共祖先. 输入输出格式 输入格式: 第一行包含三个正整数N.M.S,分别表示树的结点个数.询问的个数和 ...

  6. CDQ分治（学习笔记）

    离线算法——CDQ分治 CDQ (SHY)显然是一个人的名字,陈丹琪(MM)(NOI2008金牌女选手). 从归并开始(这里并没有从逆序对开始,是想直接引入分治思想,而不是引入处理对象) 一个很简单的 ...

  7. [转载]【转】教你如何实现linux和Windows之间的文件共享，samba的安

    原文地址:[转]教你如何实现linux和Windows之间的文件共享,samba的安装与配置作者:铅笔小蜡 本人在虚拟机下装fedora13,已经实现.1. 首先检查os是否安装好了samba. [r ...

  8. 开发板，pc，虚拟机三者如何互相ping通

    1 安装虚拟机时,主机和虚拟机必须是桥接网卡,保证了ip 同一:192,168,1,xx 2 打开虚拟机之前,先把pc机的无线网卡禁用掉只能使用本地连接,pc通过网线连接上网,打开虚拟机,命令行输入: ...

  9. VMware下Centos7-Minimal上网配置

    1.Centos7下载 http://isoredirect.centos.org/centos/7/isos/x86_64/CentOS-7-x86_64-Minimal-1810.iso 2.推荐 ...

  10. Machine Learning in Action ---- kNN

    ------------恢复内容开始------------ # -*- coding: utf-8 -*- """ Created on Thu Nov 14 19:2 ...