先写一个jsp通过ajax传值给servlet进行查询再传给对应的div进行显示。

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>联想搜索功能</title>

</head>

<script type="text/javascript" src="js/jquery-1.8.3.js"></script>

<script type="text/javascript">

    $(function(){

        $("input[name=uname]").css({

            "position":"relative"

        });

        $("#lns").css({

            "border":"1px #ccc solid",

            "width":"171px",

            "position":"absolute",

            "top":"84px",

            "left":"72px",

            "display":"none"

        });

        // 键盘松开的时候触发联想功能

        $("input[name=uname]").keyup(function(){

            var uname = $(this).val();

            if(uname != ""){

                $.ajax({

                    url:"Qservlet",

                    type:"post",

                    data:{"uname":uname},

                    dataType:"html",

                    async:true,

                    success:function(result){

                        $("#lns").show();

                        $("#lns").html(result);

                        // 点击模糊列表的值，必须在这里写，其他位置不起作用

                        $("li").unbind("click").bind("click", function(){

                            $("input[name=uname]").val($(this).html());

                            $("input[name=uname]").focus();

                            $("#lns").hide();

                        });

                        // 点击其他地方的时候隐藏

                        //$("input[name=uname]").blur(function(){

                        //    $("#lns").hide();

                        //});

                    }

                });

            }else{

                $("#lns").html("");

                $("#lns").hide();

            }

        });

    });

</script>

<body>

    <h3>输入框联想搜索功能</h3>

    请输入：<input type="text" name="uname"><input type="button" value="搜索">

    <div id="lns"></div>// 设置显示的位置

</body>

</html>

后台servlet接受数据引用dao层进行模糊查询,然后在传入显示的页面，然后在实现指定的div中进行显示

package Servlet;

import java.io.IOException;

import java.io.PrintWriter;

import java.sql.Connection;

import java.sql.ResultSet;

import java.sql.Statement;

import java.util.List;

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 javax.servlet.http.HttpSession;

import dao.DBHelper;

import util.DBUtil;

@WebServlet("/Qservlet")

public class Qservlet extends HttpServlet {

	private static final long serialVersionUID = 1L;

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

		// TODO Auto-generated method stub

		System.out.println("okok");

		response.setContentType("text/html;charset=utf-8");

        request.setCharacterEncoding("utf-8");

        response.setCharacterEncoding("utf-8");

        String uname = request.getParameter("uname");

        DBHelper dbh=new DBHelper();

        List<String> list=dbh.queryScoreByName(uname);

        for (String str : list) {

			System.out.println(str);

		}

        request.setAttribute("unames", list);

        request.getRequestDispatcher("divLns.jsp").forward(request, response);

	}

}

　　

dao层进行查询

package dao;

import java.sql.Connection;

import java.sql.ResultSet;

import java.sql.Statement;

import java.util.ArrayList;

import java.util.List;

import util.DBUtil;

public class DBHelper {

    public List<String> queryScoreByName(String name) {

        // TODO 自动生成的方法存根

        try{

            List<String> list=new ArrayList<String>();

            String sql="select * from t_corp$ where CORP_NAME LIKE '%"+name+"%'" ;

            Connection conn1=DBUtil.getConn();

            Statement stmt=conn1.createStatement();

            ResultSet rs=stmt.executeQuery(sql);

            while(rs.next()){

                list.add(rs.getString(5));

            }

            return list;

        }catch(Exception ex){

            ex.printStackTrace();

            return null;

        }

    }

}

显示的jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>联想搜索功能</title>

</head>

<script type="text/javascript" src="js/jquery-1.8.3.js"></script>

<script type="text/javascript">

    $(function(){

        $("ul").css({

            "padding":"0px",

            "margin":"0px",

            "list-style":"none",

            "width":"100%",

                        "text-align": "left",

        });

        $("li").css({

            "padding":"0px",

            "margin":"0px",

            "width":"100%"

        });

        $("li").hover(

            function(){

                $(this).css({"background-color":"#ddd"});

            },

            function(){

                $(this).css({"background-color":"#fff"});

            }

        );

    });

</script>

<body>

    <ul>

        <c:forEach begin="1" end="3" items="${unames }" var="uname" step="1">

            <li>${uname }</li>

        </c:forEach>

    </ul>

</body>

</html>

效果：

ajax实现文本框的联想功能的更多相关文章

  1. Web控件文本框Reset的功能

    在前一篇中<怎样实现Web控件文本框Reset的功能>http://www.cnblogs.com/insus/p/4120889.html Insus.NET只实现了文本框的功能.单个或 ...

  2. 给文本框添加模糊搜索功能（“我记录”MVC框架下实现）

    步骤: 1.在文本框中输入内容时,触发keyup事件: 2.在keyup事件的处理方法中,通过Ajax调用控制器的方法: 3.在控制器方法中,搜索满足条件的数据,这里分页获取数据,且只取第一页的数据, ...

  3. 基于JQuery实现的文本框自动填充功能

    1. 实现的方法 /* * js实现的文本框的自动完成功能 */ function doAutoComplete(textid,dataid,url){ $("#" + texti ...

  4. ASP.NET输入文本框自动提示功能

    在ASP.NET Web开发中会经常用到自动提示功能,比如百度搜索.我们只要输入相应的关键字,就可以自动得到相似搜索关键字的提示,方便我们快速的输入关键字进行查询. 那么在ASP.NET中,如果我们需 ...

  5. Android开发系列（二十）：AutoCompleteTextView（自己主动完毕文本框）的功能和使用方法

    当用户输入一定的字符之后,自己主动完毕文本框可以显示一个下拉菜单,供用户从中选择,当用户选择某个菜单项之后,AutoCompleteTextView可以依照用户的选择自己主动填写该文本框 AutoCo ...

  6. 怎样实现Web控件文本框Reset的功能

    在ASP.NET开发过程序,在数据插入之后,文本框TextBox控件需要Reset.如果只有一两个文件框也许没有什么问题,如果网页上有很多文本框,你就会有点问题了.再加上某一情形,一些文本框是有默认值 ...

  7. 转摘：ashx+jquery-autocomplete文本框输入提示功能Asp.net

    引入所需文件 <script type="text/javascript" src="JS/jquery-1.8.2.min.js"></sc ...

  8. 利用JavaScript实现文本框改文字功能

    <html> <head> <meta charset="utf-8"> <title>无标题文档</title> &l ...

  9. 使用 jquery-autocomplete插件 完成文本框输入自动填充联想效果 解决兼容IE输入中文问题

    项目中有时会用到ajax自动补全查询,就像Google的搜索框中那样,输入汉字或者字母的首个字母,则包含这个汉字或者字母的相关条目会显示出来供用户选择,该插件就是实现这样的功能的.autocomple ...

随机推荐

  1. dfs 序 欧拉序

    推荐博客 :https://www.cnblogs.com/stxy-ferryman/p/7741970.html DFS序其实就是一棵树顺次访问的结点的顺序,例如下面这棵树 它的 dfs 序就是 ...

  2. Webpack实战（三）：作为前端你不得不懂的Webpack资源入口和出口的配置

    关于Webpack前两篇跟大家分享的主要是Webpack的一些基本的配置,今天开始我们详细了解一下有关Webpack的各种配置,今天主要跟大家分享的是Webpack的资源入口和资源出口的配置. 如果想 ...

  3. JS原型，原型链，类，继承，class，extends，由浅到深

    一.构造函数和原型 1.构造函数.静态成员和实例成员 在ES6之前,通常用一种称为构造函数的特殊函数来定义对象及其特征,然后用构造函数来创建对象.像其他面向对象的语言一样,将抽象后的属性和方法封装到对 ...

  4. 异数OS 织梦师-Xnign（四）-- 挑战100倍速Nginx，脚踩F5硬件负载均衡

    . 异数OS 织梦师-Xnign(四)– 挑战100倍速Nginx,脚踩F5硬件负载均衡 本文来自异数OS社区 github: https://github.com/yds086/HereticOS ...

  5. List自定义排序 (例子省份排序)

    //待排序集合 List<String> list=new ArrayList<String>(); list.add("辽宁"); list.add(&q ...

  6. 基于Bootstrap和Knockout.js的ASP.NET MVC开发实战

    之前在一家公司里用过Knockout,是easyui 和 Knockout结合 的.下面的这本应该不错. 目录 前言 第一部分入门指南 第1章MVC介绍 创建第一个项目 分析HomeControlle ...

  7. Dynamics 365 CRM Connected Field Service 不能接收IoT Alert

    今天浪费了2,3个小时再connected field service(CFS)上面. 状况如下 1. 在CFS中添加了新的customer assets,并且点击了注册按钮. 2. 注册步骤一直在i ...

  8. Linux 常用工具openssh之ssh-add

    前言 ssh-add命令是把专用密钥添加到ssh-agent的高速缓存中,从而提高ssh的认证速度 语法 ssh-add [-cDdLlXx] [-t life] [file ...] 选项 -D:删 ...

  9. SpringCloud与微服务Ⅸ --- Zuul路由网关

    一.Zool是什么 Zuul包含了对请求路由和过滤两个最主要的功能: 其中路由功能负责将外部请求转发到具体的微服务实例上,是实现外部访问统一入口的基础而过滤器功能则负责对请求的处理过程进行干预,是实现 ...

  10. sublime sftp插件安装及时更新网站

    Sublime Text 2 本身并不强大,但是它方便使用插件扩展功能,所以变得很强大.今天介绍一个很实用的插件 SFTP ,可以大大提高前端工作效率. 常见的工作流程 有时候修改一些网站上的文件,通 ...