ajax实现文本框的联想功能

先写一个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实现文本框的联想功能的更多相关文章

Web控件文本框Reset的功能
在前一篇中<怎样实现Web控件文本框Reset的功能>http://www.cnblogs.com/insus/p/4120889.html Insus.NET只实现了文本框的功能.单个或 ...
给文本框添加模糊搜索功能（“我记录”MVC框架下实现）
步骤: 1.在文本框中输入内容时,触发keyup事件: 2.在keyup事件的处理方法中,通过Ajax调用控制器的方法: 3.在控制器方法中,搜索满足条件的数据,这里分页获取数据,且只取第一页的数据, ...
基于JQuery实现的文本框自动填充功能
1. 实现的方法 /* * js实现的文本框的自动完成功能 */ function doAutoComplete(textid,dataid,url){ $("#" + texti ...
ASP.NET输入文本框自动提示功能
在ASP.NET Web开发中会经常用到自动提示功能,比如百度搜索.我们只要输入相应的关键字,就可以自动得到相似搜索关键字的提示,方便我们快速的输入关键字进行查询. 那么在ASP.NET中,如果我们需 ...
Android开发系列（二十）：AutoCompleteTextView（自己主动完毕文本框）的功能和使用方法
当用户输入一定的字符之后,自己主动完毕文本框可以显示一个下拉菜单,供用户从中选择,当用户选择某个菜单项之后,AutoCompleteTextView可以依照用户的选择自己主动填写该文本框 AutoCo ...
怎样实现Web控件文本框Reset的功能
在ASP.NET开发过程序,在数据插入之后,文本框TextBox控件需要Reset.如果只有一两个文件框也许没有什么问题,如果网页上有很多文本框,你就会有点问题了.再加上某一情形,一些文本框是有默认值 ...
转摘：ashx+jquery-autocomplete文本框输入提示功能Asp.net
引入所需文件 <script type="text/javascript" src="JS/jquery-1.8.2.min.js"></sc ...
利用JavaScript实现文本框改文字功能
<html> <head> <meta charset="utf-8"> <title>无标题文档</title> &l ...
使用 jquery-autocomplete插件完成文本框输入自动填充联想效果解决兼容IE输入中文问题
项目中有时会用到ajax自动补全查询,就像Google的搜索框中那样,输入汉字或者字母的首个字母,则包含这个汉字或者字母的相关条目会显示出来供用户选择,该插件就是实现这样的功能的.autocomple ...

随机推荐

react路由的跳转和传参
1.路由的跳转一.DOM跳转在需要跳转的页面导入import {Link} from 'react-router-dom',在需要跳转的地方使用link标签的to属性进行跳转,路由配置文件中导出的 ...
JVM之GC算法的实现(垃圾回收器)
上一节:<JVM之GC算法> 知道GC算法的理论基础,我们来看看具体的实现.只有落地的理论,才是真理. 一.JVM垃圾回收器的结构 JVM虚拟机规范对垃圾收集器应该如何实现没有规定,因为没 ...
解决RabbitMQ远程不能访问的问题
刚刚安装的RabbitMQ-Server-3.3.5,并且也已经开启了Web管理功能,但是现在存在一个问题: 出于安全的考虑,guest这个默认的用户只能通过http://localhost:1567 ...
Jquery图片上传功能整理
最近在做一个图片上传到服务器的功能,之前基本没有什么JS的经验,用的也是网上的插件.做了一个星期才把他弄好,现在做一下总结,方便以后查看. 用的插件是WebUploader,上面有很多例子,我找的例子 ...
QuartzCore
QuartzCore 说起QuartzCore不知道有多少小伙伴很容易和Quartz2D.CoreGraphics等混淆在一起傻傻分不清楚?所以在下面我们先把这几个很容易混淆或者是分不清楚的框架稍加整 ...
（1）解锁 MongoDB replica set核心姿势
副本集Replica Set是一个术语,定义具有多节点的数据库集群,这些节点具有主从复制(master-slave replication) 且节点之间实现了自动故障转移. 这样的结构通常需要具有奇数 ...
如何在ArcGIS中恢复注记文字
文字标注是地图上一种特殊的视觉元素,可通过文字表达图形符号难以说明的地图内容,它与图形符号结合在一起存在于地图上,是关乎地图构图美的关键因素之一. MapGIS软件下子图对象和注释对象统统保存在点文件 ...
【Spring Boot 源码解读】之【为何引入了 Jedis 依赖最后用的还是 Lettuce 客户端？】
1.Spring Boot 2.x 的两种 Redis 客户端首先,我们都知道,从 Spring Boot 2.x 开始 Lettuce 已取代 Jedis 成为首选 Redis 的客户端.当然 S ...
重拾c++第一天（1）：环境配置
时过多年,c++基本不记得了,故在此记录相关重拾记录. 学习语言第一步当然是环境配置了(笑),由于暂无用c++进行大型项目开发的需求,所以先下载dev进行过渡. 安装过程非常简单,值得注意的是配置时选 ...
区间dp - 全部按下一列石头
There is one last gate between the hero and the dragon. But opening the gate isn't an easy task. The ...

ajax实现文本框的联想功能

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

随机推荐

热门专题