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. 框架使用的是 ...
随机推荐
- 【Tomcat】直接启动tomcat时为tomcat指定JDK 而不是读取环境变量中的配置
在windows环境下以批处理文件方式启动tomcat,只要运行<CATALINA_HOME>/bin/startup.bat这个文件,就可以启动Tomcat.在启动时,startup.b ...
- 【转】Kylin的Hierarchies，Derived维度方面配置优化
http://blog.csdn.net/jiangshouzhuang/article/details/51286150 Hierarchies: 理论上对于N维度,我们可以进行2的N次方的维度组合 ...
- LR检查点的if (status == LR_FAIL)写法
C语言例子:登录失败返回一个信息 int status = web_url("Login", "URL=https://secure.computing.com//log ...
- loadrunner处理HTTP重定向请求
//place this in global.h int HttpRetCode; int i=0; char depthVal[10]; char cTransactName[2000 ...
- linux安装配置SVN并设置钩子
安装说明 系统环境:CentOS-6.3安装方式:yum install (源码安装容易产生版本兼容的问题)安装软件:系统自动下载SVN软件 检查已安装版本 #检查是否安装了低版本的SVN 1 rpm ...
- DSP using MATLAB 示例Example3.1 3.2 3.3
上代码: w = [0:1:500]*pi/500; % [0,pi] axis divided into 501 points. X = exp(j*w) ./ (exp(j*w) - 0.5*on ...
- JS(ajax笔记)
简介:AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). AJAX 不是新的编程语言,而是一种使用现有标准的新方法,是与服务器交 ...
- Linux 积累
Unable to locate package 解决办法: sudo apt-get update
- HTML5属性运用
HTML5 接触移动端,或专注于支持HTML5浏览器进行前端开发的工作者都不会陌生,这个已经普及很广,对于我专注于PC端开发的人来说,觉得陌生但又觉得很熟悉,大家都知道做PC前端开发为了兼容IE老版本 ...
- The 2015 China Collegiate Programming Contest G. Ancient Go hdu 5546
Ancient Go Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 65535/65535 K (Java/Others)Total ...