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 ...
随机推荐
- 每日一问2：堆(heap)和栈(stack)的区别
因为这里没有明确指出堆是指数据结构还是存储方式,所以两个尝试都回答一下. 一.堆和栈作为数据结构 1.堆(heap),也叫做优先队列(priority queue),队列中允许的操作是先进先出(FIF ...
- MySQL之性能优化
查看执行计划explain 1.1 Explain命令:它可以对select语句进行分析,并输出select执行的详细信息,以对开发人员针对性优化 1.2 Explain的用法:在selec ...
- 手抖把Python2.7卸载了,导致了自己的yum不可用以及yum因python版本无法使用的问题
摘要: 从标题就能看到我有多心如死灰了,简单介绍下我是如何自残的过程. ①首先因为需要部署爬虫程序,然后安装Python3. ②Python3系列和Python2系列版本不向下兼容,所以我就卸载了机器 ...
- 探究公钥、私钥、对称加密、非对称加密、hash加密、数字签名、数字证书、CA认证、https它们究竟是什么，它们分别解决了通信过程的哪些问题。
一.准备 1. 角色:小白.美美.小黑. 2. 剧情:小白和美美在谈恋爱:小黑对美美求而不得.心生怨念,所以从中作梗. 3. 需求:小白要与美美需通过网络进行通信,联络感情,所以必须保证通信的安全性. ...
- hdu 6567 Cotree 树的重心
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=6567 #include<iostream> #include<algorithm&g ...
- Ubuntu阿里镜像
ubuntu 14.04: http://mirrors.aliyun.com/ubuntu-releases/14.04/ ubuntu 16.04: http://mirrors.aliyun.c ...
- newSQL 到底是什么？
数据库发展至今已经有3代了: SQL,传统关系型数据库,例如 MySQL noSQL,例如 MongoDB newSQL SQL 的问题 互联网在本世纪初开始迅速发展,互联网应用的用户规模.数据量都越 ...
- Scala 学习（4）之「类——基本概念2」
目录 内部类 extends override和super override field isInstanceOf和asInstanceOf getClass和classOf 内部类 import s ...
- 【转载】Notepad++源码分析
在网上发现了一个哥们写了关于Notepad++源码的文章,不过就写了一就没有了,我就接着他的工作再说说吧! 大三了,也写了一点儿程序了,但是如果只是按照自己的思路写下去恐怕难以提高,于是准备开始阅读一 ...
- 痞子衡嵌入式：语音处理工具pzh-speech诞生记（2）- 界面构建(wxFormBuilder3.8.0)
大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是语音处理工具pzh-py-speech诞生之界面构建. 之前痞子衡设计过一个串口调试助手pzh-py-com,也专门写过一篇关于其界面构 ...