目的和效果:

    输入框输入字符串x,匹配后台传入的数据str,如果str中的元素包含字符串x,则提示。

后台代码:

                  String x = request.getParameter("c");//获取前台输入的数据
        Map<String, String> map = new HashMap<String, String>();
        String a = "aa,aaa,aba,acc";
        String b = "bb,bcb,ba";
        String c = "cc,cd,caca,cff";
        String d = "df,dg,dh";//模拟数据库取值
        map.put("a", a);
        map.put("b", b);
        map.put("c", c);
        map.put("d", d);
        if (x.startsWith("a")) {
            out.print(map.get("a"));//匹配成功返回结果
        } else if (x.startsWith("b")) {
            out.print(map.get("b"));
        } else if (x.startsWith("c")) {
            out.print(map.get("c"));
        } else if (x.startsWith("d")) {
            out.print(map.get("d"));
        }else{
            out.print("");
            

}


页面布局
<input type="text" id="search" value="" />

     <div id="content">
         <ul id="list">

         </ul>

     </div>


CS

            #content {
                display: none;
                margin-top: 3px;
                border: 1px solid gray;
                width: 200px;
            }
            
            #list {
                list-style: none;
                margin: 0 0;
                padding: 0 0;
            }
            
            li {
                margin: 5px 5px;
            }
            
            li:hover {
                background-color: gainsboro;

}



JS

            $(function() {
                //输入框绑定一个事件,内容改变的事件
                $("#search").bind('input property', function() {
                    //只要数据发生改变,就把原来的数据清空
                    $("#list").html('');
                    $("#content").hide();
                    //执行ajax,向后台传递数据,并得到后台返回的数据列表
                    //url,ajax的访问的页面(后台的地址)
                    //data,传递给后台的数据
                    //回调函数,后台响应结果之后给前台返回数据的回调函数
                    //判断如果输入框为空,就不调用ajax
                    if($("#search").val() != '') {
                        $.post('search', {
                            'c': $("#search").val()
                        }, function(data) {
                            //解析数据
                            data = data.split(',');
                            $(data).each(function(e) {
                                //得到数组的每一个元素
                                $("#list").append('<li>' + data[e] + '</li>');
                                $("#content").show();
                                //设置点击事件
                                $("li").click(function() {
                                    //把内容填充到输入框中
                                    $("#search").val($(this).html());
                                    $("#list").html('');
                                    $("#content").hide();
                                })
                            })
                        })
                    }
                })

})

效果图

 














利用Ajax和Servlet实现输入框提示功能的更多相关文章

  1. 利用Ajax和JSON实现关于查找省市名称的二级联动功能

    功能实现的思路:我们经常碰见网上购物时候填写收件地址会用到这个查找省市县的三级联动查找功能,我们可以利用Ajax和JSON技术模拟这个功能,说白了同样是使用Ajax的局部数据更新功能这个特性.因为省市 ...

  2. JQuery+AJAX实现搜索文本框的输入提示功能

    平时使用谷歌搜索的时候发现只要在文本框里输入部分单词或字母,下面马上会弹出一个相关信息的内容框可供选择.感觉这个功能有较好的用户体验,所以也想在自己的网站上加上这种输入提示框. 实现的原理其实很简单, ...

  3. Ajax实现搜索栏中输入时的自动提示功能

    使用 jQuery(Ajax)/PHP/MySQL实现自动完成功能 JavaScript代码: <script src="jquery-1.2.1.pack.js" type ...

  4. [前端引用] 利用ajax实现类似php include require 等命令的功能

    利用ajax实现类似php中的include.require等命令的功能 最新文件下载: https://github.com/myfancy/ajaxInclude 建议去这里阅读readme-2. ...

  5. 利用ajax的方式来提交数据到后台数据库及交互功能

    怎么样用ajax来提交数据到后台数据库,并完成交互呢????? 一.当我们在验证表单的时候,为了阻止把错误的也发送到服务器,我们通常这样设置:     $(function(){       var ...

  6. 利用ajax短轮询+php与服务器交互制作简易即时聊天网站

    主流的Web端即时通讯方案大致有4种:传统Ajax短轮询.Comet技术.WebSocket技术.SSE(Server-sent Events). 本文主要介绍ajax短轮询的简易实现方式. 看懂此文 ...

  7. Jquery实现搜索框提示功能

    博客的前某一篇文章中http://www.cnblogs.com/hEnius/p/2013-07-01.html写过一个用Ajax来实现一个文本框输入的提示功能.最近在一个管理项目的项目中,使用后发 ...

  8. 转载:Eclipse+Spket插件+ExtJs4修改版提供代码提示功能[图]

    转载:Eclipse+Spket插件+ExtJs4修改版提供代码提示功能[图] ExtJs是一种主要用于创建前端用户界面,是一个基本与后台技术无关的前端ajax框架.功能丰富,无人能出其右.无论是界面 ...

  9. 利用redis完成自动补全搜索功能(三)

    前面已经完成了分词和自动提示功能,最后把搜索结合在一起,来个完成的案例.当然最好还是用搜索分词解决,这个只是一个临时解决方案. 其实加上搜索很简单,要做的就是3件事 1. 分词的时候,把有用词的id存 ...

随机推荐

  1. ubuntu 安装ftp nginx tomcat,mysql

    tomcat sudo apt-get install tomcat 访问方式,http://loclahost:8080 进入sbin目录下 sudo ./startup.sh开启 sudo ./s ...

  2. POJ1426:Find The Multiple(算是bfs水题吧,投机取巧过的)

    http://poj.org/problem?id=1426 Description Given a positive integer n, write a program to find out a ...

  3. 4.keras实现-->生成式深度学习之DeepDream

    DeepDream是一种艺术性的图像修改技术,它用到了卷积神经网络学到的表示,DeepDream由Google于2015年发布.这个算法与卷积神经网络过滤器可视化技术几乎相同,都是反向运行一个卷积神经 ...

  4. MVC增加操作日志

    在后台管理中,有一些操作是需要增加操作日志的,尤其是对一些比较敏感的金额类的操作,比如商城类的修改商品金额.删除商品.赠送金额等人工的操作.日志中记录着相关操作人的操作信息,这样,出了问题也容易排查. ...

  5. SpringMyBatisDay02

    全篇概述:IOC    DI     参数值注入      注解依赖注入 1.Spring IOCIOC 全称Inversion Of Control,被翻译成控制反转控制反转指:程序中对象的获取方式 ...

  6. malloc 实现原理

    1. Reference: 如何实现一个malloc http://blog.codinglabs.org/articles/a-malloc-tutorial.html 2.

  7. C# 多线程,new ThreadStart(方法)中的方法如果有参数,该怎么写

    using System; using System.Threading; public class Work { public static void Main() { // Start a thr ...

  8. 开启你的kali linux DIY之旅

    更新源 首先 是kali2016.2更新源的问题,网上找了好久,都不是很满意.后来把kali 2016.2安装到实体机中才发现,里面自带了更新源.下面我把这个官方自带更新源分享出来(速度蛮快的) de ...

  9. 手撕vue-cli配置——webpack.base.conf.js篇

    在开始写webpack.base.conf.js(简称base)之前,我们先来看一下vue-loader.conf.js这个文件,毕竟在base中我们还会用到: 'use strict' //引入前一 ...

  10. OpenCV实现SfM(三):多目三维重建

    http://lib.csdn.net/article/opencv/24548 注意:本文中的代码必须使用OpenCV3.0或以上版本进行编译,因为很多函数是3.0以后才加入的. 目录: 问题简化 ...