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. 框架使用的是 ...
随机推荐
- python操作excel表格(xlrd/xlwt)
最近遇到一个情景,就是定期生成并发送服务器使用情况报表,按照不同维度统计,涉及python对excel的操作,上网搜罗了一番,大多大同小异,而且不太能满足需求,不过经过一番对源码的"研究&q ...
- SPOJ REPEATS 后缀数组
题目链接:http://www.spoj.com/problems/REPEATS/en/ 题意:首先定义了一个字符串的重复度.即一个字符串由一个子串重复k次构成.那么最大的k即是该字符串的重复度.现 ...
- Type.GetField 修改类中私有字段。
上一篇Popup Bug中修改了SystemParameters类中静态只读属性MenuDropAlignment. var t = typeof(SystemParameters); var fie ...
- Docker使用-v挂载主机目录到容器后出现Permission denied
1. 在挂载主机目录的到容器后,操作挂载的目录出现权限问题: # 将主机上的/data/share/master目录挂载到容器的/opt/share目录docker run -it --name=ma ...
- Robotium ant 报错Unable to find instrumentation info for: ComponentInfo{project/android.test.InstrumentationTestRunner}
[echo] Running tests ... [exec] INSTRUMENTATION_STATUS: id=ActivityManagerService [exec] INSTRUMENTA ...
- Poj1131-Octal Fractions
Octal Fractions Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 6669 Accepted: 3641 D ...
- #来自codeforces round 363
具体情况是这样的:同样的程序,在我自己的电脑上跑出来是正确的结果,而提交到CF的评测机后对于相同的输入数据,结果居然不一样了!反复检查后未发现任何问题.目前怀疑可能与memset有关,因为在一步步修改 ...
- BZOJ1931 : [Shoi2007]Permutation 有序的计数
枚举LCP以及下一位变小成什么,统计出剩下的有几个可以在原位置. 然后枚举剩下的至少有几个在原位置,容斥计算答案. 时间复杂度$O(n^3)$. #include<cstdio> type ...
- mapreduce.framework.name
mapreduce.framework.name默认是local: <property><name>mapreduce.framework.name</name>& ...
- Android Drawable
1. Shape 属性: (1) solid ( 填充 ) 参数:android:color ( 填充的颜色 ) (2) gradient ( 渐变 ) 参数:android:startColor ( ...