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. 框架使用的是 ...
随机推荐
- zookeeper源码分析二FASTLEADER选举算法
如何在zookeeper集群中选举出一个leader,zookeeper使用了三种算法,具体使用哪种算法,在配置文件中是可以配置的,对应的配置项是"electionAlg",其中1 ...
- java 大数计算
这几天做了几道用大数的题,发现java来做大数运算十分方便.对acmer来说是十分实用的 1.valueOf(parament); 将参数转换为制定的类型 比如 int a=3; BigInteger ...
- 利用scp传输文件小结
从本地复制到远程 scp mysql-5.5.29-linux2.6-x86_64.tar.gz 192.168.1.11:/opt 指定端口: scp -P 60022 /opt/ray/nginx ...
- 关于初级java面试问题的一些整理 （部分转自他人）
1.面向对象的特征有哪些方面 1.抽象: 抽象就是忽略一个主题中与当前目标无关的那些方面,以便更充分地注意与当前目标有关的方面.抽象并不打算了解全部问题,而只是选择其中的一部分,暂时不用部 ...
- css整理－04 基本视觉格式化
基本框 假定每一个元素都会生成一个火多个矩形框,为元素框 元素框中心有一个内容区,周围有内边距,边距和外边距 内容的背景会应用到内边距,外边距是透明的,可以看到父元素的背景 内边距不能是负值,外边距可 ...
- Zepto tap 穿透bug
当两个层重叠在一起时,使用Zepto的tap事件时,点击上面的一层时会触发下面一层的事件,特别是底层如果是input框时,必“穿透”,“google”说原因是“tap事件实际上是在冒泡到body上时才 ...
- CSS总结1
新增:修改placeholder样式 ::-moz-placeholder{color:red;} //ff19+ :-moz-placeholder{color:red} //ff18- ::-we ...
- 贪心 Codeforces Round #289 (Div. 2, ACM ICPC Rules) B. Painting Pebbles
题目传送门 /* 题意:有 n 个piles,第 i 个 piles有 ai 个pebbles,用 k 种颜色去填充所有存在的pebbles, 使得任意两个piles,用颜色c填充的pebbles数量 ...
- python 代码片段18
#coding=utf-8 f=open('text.txt','w') f.write('foo\n') f.write('bar\n') f.close() f=open('test.txt',' ...
- 隐式调用 Intent 大全, 很全
http://ming-fanglin.iteye.com/blog/1061312 //调用浏览器 Uri uri = Uri.parse(""); Intent it = n ...