jquery ui autocomplete 实现点击文本框，出现所有查询信息效果,与bootstrap结合使用修改样式
直接看代码
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Autocomplete - Default functionality</title>
<link rel="stylesheet" href="bootstrap.css"/>
<link ref="stylesheet" type="text/css" href="jquery-ui-1.10.0.custom.css"/> <script src="jquery-1.11.2.js"></script>
<script src="bootstrap.js"></script>
<script src="jquery-ui.js"></script>
<script src="jquery.ui.datepicker-zh-CN.js"></script>
<style type="text/css"> .ui-autocomplete{ max-width:175px; /*下拉列表宽度*/ max-height:150px; overflow-y:auto; overflow-x:hidden; padding-right:1px; color:black; font-size:14px; } .ui-state-focus{ /*设置被选中的下拉列表数据样式*/ background-color:#009acd; font-weight:bold; } </style>
<body>
<script type="text/javascript">
$(function() {
//可以实现点击文本框就进行查询，但是需要和后台进行配合，
//首先需要是一个模糊查询，当输入空格时查询出所有数据
$('#id').autocomplete({
source:function(request,response){
$.ajax({
type:"post",
url:"<c:url value='/getDeviceName'/>",
dataType:"json",
data{
deviceName:request.term
},
success:function(data){
response($.map(data,function(item){
return {
lable:item.deviceName,
value:item.deviceName
}
}));
}
});
},
minLength: ,
delay:,
autoFocus:true //是否自动默认选中下拉列表第一项，默认为false，即不选中
select:function(event,ui){ //键盘上下键移动，将选中的值放入到搜索框中
$("#id").val(ui.item.deviceName);
}
}).focus(function(){
//根据版本不同使用下面的两个方法，其实是玩了个障眼法，在这里当文本框获取焦点时，输入个空格进行模糊查询
//后台做了判断，如果输入的值前后都去了空格，如果输入空格，后台接收数据就为null，则此时就默认按照所有进行查找，即like %%
//本身这个也是sql自身的特性，但是一下两句话在不同版本中使用，上面不行，用下面，下面不行用上面
//$(this).data("autocomplete").search(" "));
$(this).data("uiAutocomplete").search(" ");
});
</script>
<input type="text" id="id" name="deviceName">
</body>
</html>
下面为实例
package com.util;
import java.sql.Connection;
import java.sql.DriverManager;
public class ConnectionUtil {
private static ThreadLocal<Connection> cs = new ThreadLocal<Connection>();
public static Connection getConnection() throws Exception{
Connection c = cs.get();
if(null==c){
Class.forName("com.mysql.jdbc.Driver");
c = DriverManager.getConnection("jdbc:mysql://localhost:3306/itac", "root", "root");
}
return c;
}
}
package com.dao;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;
import com.po.Device;
import com.util.ConnectionUtil;
public class DeviceDao {
public List<Device> getDevices(String deviceName){
Connection c=null;
PreparedStatement ps =null;
List<Device> ds = new ArrayList<Device>();
try {
c = ConnectionUtil.getConnection();
ps= c.prepareStatement("select * from device where deviceName like ?");
ps.setString(, "%"+deviceName+"%");
ResultSet rs = ps.executeQuery();
while(rs.next()){
Device d = new Device();
d.setId(rs.getInt("id"));
d.setDeviceName(rs.getString("deviceName"));
d.setIp(rs.getString("ip"));
ds.add(d);
}
} catch (Exception e) {
e.printStackTrace();
}finally{
if(null!=ps){
try {
ps.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
if(null!=c){
try {
c.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
}
return ds;
}
}
package com.servlet;
import java.io.IOException;
import java.sql.Connection;
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 com.dao.DeviceDao;
import com.google.gson.Gson;
import com.po.Device;
import com.util.ConnectionUtil;
public class DeviceServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
private DeviceDao deviceDao = new DeviceDao();
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request, response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//参数要去空格，即用trim处理
String deviceName = request.getParameter("deviceName").trim();
System.out.println(deviceName);
List<Device> ds = deviceDao.getDevices(deviceName);
Gson gson = new Gson();
String dstr = gson.toJson(ds);
response.getWriter().write(dstr);
}
}
页面
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!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>Insert title here</title>
<link href="${pageContext.request.contextPath }/css/bootstrap.css"
type="text/css" rel="stylesheet" />
<link href="${pageContext.request.contextPath }/css/jquery-ui-1.10.0.custom.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.10.2.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/bootstrap.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-ui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.ui.datepicker-zh-CN.js"></script>
<style type="text/css">
.ui-autocomplete{
max-width:160px; /*设置下拉列表框的宽度*/
max-height:150px;/*设置下拉列表框的高度，如果放不下，则会出现滚动条*/
overflow-y:auto;/**/
overflow-x:hidden;
padding-right:1px;
color:black; /*设置下拉框的字体颜色*/
font-size:14px; /*设置下拉框的字体大小*/
}
.ui-state-focus{
background-color:red; /*设置下拉列表中被选中的字体的颜色*/
font-weight:bold; /*设置下拉列表中被选中的字体加粗显示*/
}
</style>
</head>
<body>
<table class="table">
<tr>
<td>设备名称</td>
<td><input type="text" id="deviceName" name="deviceName"/></td>
</tr>
</table>
</body>
<script type="text/javascript">
$(function(){
$("#deviceName").autocomplete({
source:function(request,response){
$.ajax({
type:"post",
url:"<c:url value="/dServlet"/>",
dataType:"json",
data:{
deviceName:request.term
},
success:function(data){
response($.map(data,function(item){
return {
lable:item.deviceName,
value:item.deviceName
}
}));
}
});
},
minLength:,
delay:,autoFocus:true,
select:function(event,ui){
$("#deviceName").val(ui.item.deviceName);
}
}).focus(function(){
$(this).data("uiAutocomplete").search(" ");
});
});
</script>
</html>
本页面的样式还需要调整
这里有篇可以稍微做个参考的文章
http://stackoverflow.com/questions/4132058/display-jquery-ui-auto-complete-list-on-focus-event
jquery ui autocomplete 实现点击文本框，出现所有查询信息效果,与bootstrap结合使用修改样式的更多相关文章
- jquery ui dialog去除第一个文本框焦点问题
最近做项目时,使用了jqueryUI dialog功能,当打开弹出框时,如果弹出框内容里面存在input,那么弹出框会自动获得第一个文本框焦点. 有时候,弹出框会有日期控件,一般日期控件采用focus ...
- jquery UI autocomplete当输入框焦点聚焦时自动弹出跟随下拉框
$("#search").autocomplete({ minLength: 0, source: function(request,response){ // request对象 ...
- jQuery UI Autocomplete是jQuery UI的自动完成组件（share）
官网:http://jqueryui.com/autocomplete/ 以下分享自:http://www.cnblogs.com/yuzhongwusan/archive/2012/06/04/25 ...
- jQuery UI Autocomplete是jQuery UI的自动完成组件
支持的数据源 jQuery UI Autocomplete主要支持字符串Array.JSON两种数据格式. 普通的Array格式没有什么特殊的,如下: ? 1 ["cnblogs" ...
- jQuery ui autocomplete下拉列表样式失效解决，三种获取数据源方式,
jQuery有很多很多的已经实现,很漂亮的插件,autocomplete就是其中之一.jQuery ui autocomplete主要支持字符串Array.JSON两种数据格式,jQuery ui b ...
- jQuery UI Autocomplete Combobox 配 ASP.NET DropDownList
0.引言 1.起因 一开始使用Autocomplete做了一个自动补全的文本框,如上图.后来因业务需要希望能在这个文本框的边上做个下拉列表按钮,一按就展开所有支持 ...
- Jquery ui autocomplete简单api
重要说明:与配置选项类似,Autocomplete插件的方法也不是直接调用,而且通过autocomplete()方法进行间接调用.例如: $("#title").autocompl ...
- jQuery ui autocomplete选择列表被Bootstrap模态窗遮挡的完美解决方法
转:http://www.cnblogs.com/wiseant/p/4553837.html 最近在一个ASP.NET MVC5项目中使用Bootstrap的模态窗(弹出层)来让用户填写内容,其中的 ...
- jQuery UI AutoComplete的使用
现场提出优化单,Table Mapping里关于获取数据源下所有表名的地方由于表数量过多选择不便,需添加搜索功能.原本的实现是一个Dialog ,现打算将其改为AutoComplete. 框架使用的是 ...
随机推荐
- 【POI word】使用POI实现对Word的读取以及生成
项目结构如下: 那第一部分:先是读取Word文档 package com.it.WordTest; import java.io.FileInputStream; import java.io.Fil ...
- XSS 跨站脚本攻击之构造剖析(一)
1.XSS-Filter:跨站脚本过滤器,用于分析用户提交的输入,并消除潜在的跨站脚本攻击 (1)XSS Filter实际上是一段精心编写的过滤函数作用是过滤XSS跨站脚本代码: (2)绕过XSS F ...
- Codeforces Round #354 (Div. 2)-A
A. Nicholas and Permutation 题目链接:http://codeforces.com/contest/676/problem/A Nicholas has an array a ...
- shell-bash学习01基础、打印、环境变量
基础 终端提示符: username@hostname$; $: 一般用户 #:root用户 运行脚本 Bash执行: * bash script.sh; 直接运行: 脚本开头添加shebang起始: ...
- 移动网站中，用canvas,svg比用图片好？
1.Svg可以单独作为文件打开,在AI里做矢量图形,保存图层路径,即可另存为Svg文件. (1) Path语法:命令+参数.大写字母表示坐标参数为绝对位置,小写字母表示坐标参数为相对位置(即上次画笔结 ...
- 手持终端PDA应用固定资产管理系统（资产查询 盘点）软件程序系统
一.产品概述 固定资产管理系统,是针对企事业单位内部资产管理中出现的工作量大.过程繁琐.追踪困难等一系列难题开发的一套先进管理软件.软件实现了对资产的多种方式管理,目前包括条形码.二维码.RFID管理 ...
- JSON字符串和对象之间的转换
JSON(JavaScript Object Notation) 是JavaScript编程语言的一个子集.正因JSON是JavaScript的一个子集,所以它可清晰的运用于此语言中. eval函数 ...
- JavaScript类型转换
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- iOS学习28之UITabBarController
1. 标签视图控制器 -- UITabBarController 视图(UIView) ---> 图层 ---> 子视图 视图控制器(UIViewController) ---> 管 ...
- BZOJ3654 : 图样图森破
考虑枚举回文中心,然后向两边扩展,当匹配到当前串的边界的时候,枚举下一个串接上. 这个过程可以通过记忆化搜索来完成,设: $f[i][0]$表示对于$i$这个位置,$[i,串结尾]$等待匹配的最长回文 ...