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. 框架使用的是 ...
随机推荐
- Android开发中Handler的经典总结
当应用程序启动时,Android首先会开启一个主线程(也就是UI线程),主线程为管理界面中的UI控件,进行事件分发. AD: 一.Handler的定义: 主要接受子线程发送的数据, 并用此数据配合主线 ...
- CLR 初步
1. 源代码编译为托管模块 程序在.NET框架下运行,首先要将源代码编译为 托管模块.CLR是一个可以被多种语言所使用的运行时,它的很多特性可以用于所有面向它的开发语言.微软开发了多种语言的编译器,编 ...
- Android拓展系列(11)--打造Windows下便携的Android源码阅读环境
因为EXT和NTFS格式的差异,我一直对于windows下阅读Android源码感到不满. 前几天,想把最新的android5.0的源码下下来研究一下,而平时日常使用的又是windows环境,于是专门 ...
- Linux IO模型和网络编程模型
术语概念描述: IO有内存IO.网络IO和磁盘IO三种,通常我们说的IO指的是后两者. 阻塞和非阻塞,是函数/方法的实现方式,即在数据就绪之前是立刻返回还是等待. 以文件IO为例,一个IO读过程是文件 ...
- 宫格布局实例（注意jquery的版本号要统一）
<!DOCTYPE html><html><head><meta charset="utf-8" /><style> * ...
- 《DSP using MATLAB》示例Example4.14
代码: b = [1]; a = [1, -1.5, 0.5]; % [R, p, C] = residuez(b,a) Mp = (abs(p))' Ap = (angle(p))'/pi % ch ...
- mvc-9测试和调试
单元测试 单元测试是比集成测试更底层的测试,用于确保特定的后台代码片段能正常运行; 前端单元测试更多是为了发现浏览器兼容性的bug; 断言 断言是测试的核心,是一些表述代码期望执行结果的语句 //正确 ...
- git 基础使用
1: 安装客户端 2: 注册使用github 3: 具体操作 3-1: 右键打开:git bash here 执行 ssh-keygen -t rsa -C "youremail@examp ...
- zepto下加载openbox弹出层
function fnOpenBox(objId,animateD,speed,tween,hide){ var oOpenBox = $(objId); oOpenBox.show(); oOpen ...
- iOS Xcode behaviors个人常用Debug配置