jQuery ui autocomplete下拉列表样式失效解决，三种获取数据源方式,
jQuery有很多很多的已经实现，很漂亮的插件，autocomplete就是其中之一。jQuery ui autocomplete主要支持字符串Array、JSON两种数据格式，jQuery ui bootstrap autocomplete和次用法几乎相同
主要参数：
Source:数据源，类型为String、Array、Function，其中String为ajax请求的服务器端地址，返回Array/JSON格式，Array即为数组，静态定义到页面中的数据，下面会有具体的 demo，
Function(request,response):通过request.term获得输入的值，response(Array)来呈现数据（JSONP是这种方式）；
minLength:当输入框内字符串长度达到minLength时，激活Autocomplete
autoFocus:当autocomplete选择菜单弹出时，自动选中第一个。
delay：即延迟多少毫秒autocomplete
disabled：是否禁用自动完成功能，默认false
jQuery ui提供的常用方法：
close():关闭智能提示框
destory():销毁智能提示框，将其所产生的元素完全删除，使其恢复至初始状态
disable():禁用自动完成功能
enable():开启自动完成功能
主要事件：
change(event,ul):当值改变时发生，ui.item为选中项
close(event,ui):当智能提示框关闭时发生
create(event,ui):当智能提示框创建时发生，可以在此事件中，对外观进行控制
focus(event,ui):当智能提示列表任意一项获得焦点时发生，ui.item为获得焦点的项
open(event,ui):当智能提示框打开或更新时发生
response(event,ui):在搜索完成之后智能提示框显示前发生，可以在此时间中对显示项进行处理
search(event,ui):在开始请求之前发生，可以在此事件中返回false来取消请求
select(event,ui):当智能提示框中任意一项被选中时发生，ui.item为选中项
使用时应首先需要导入相关的js文件。下载地址：http://jqueryui.com/autocomplete/
第一种获取数据源方式：String，即通过字符串发送ajax，本例为了省事，直接就使用了原始的servlet，没有用到框架，只是演示效果
dao 层
package com.dao;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.Statement;
import java.util.ArrayList;
import java.util.List;
public class Dao {
private static Connection getConnection() throws Exception{
Class.forName("com.mysql.jdbc.Driver");
return DriverManager.getConnection("jdbc:mysql://localhost:3306/itac", "root", "root");
}
public static List<String> getNames(String username) throws Exception{
Connection c = getConnection();
Statement stat = c.createStatement();
ResultSet rs = stat.executeQuery("select user_name from t_user where user_name like '%"+username+"%'");
List<String> strs = new ArrayList<String>();
while(rs.next()){
strs.add(rs.getString("user_name"));
}
return strs;
}
}
servlet层
package com.servlet;
import java.io.IOException;
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.Dao;
@WebServlet(name="autoServlet",value="/auto")
public class AutoServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request, response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8");//解决乱码
String username = request.getParameter("term");//默认传过来的参数名成为term，封装了文本框中输入的值
StringBuffer sb = new StringBuffer("[");
try {
List<String> names = Dao.getNames(username);
for(int i=0;i<names.size();i++){
if(i==names.size()-1){
//注意在拼接的时候，要用双引号，单引号我试过，不起作用好像是,至少key必须是双引号，最好都写成双引号
/*
* 其中label属性用于显示在autocomplete弹出菜单，而value属性则是选中后给文本框赋的值。如果没有指定其中一个属性
* 则用另一个属性替代(即value和label值一样)，如果label和value都没有指定，则无法用于autocomplete的提示。
*/
sb.append("{\"lable\":\""+names.get(i)+"\",\"value\":\""+names.get(i)+"\"}]");
}else{
sb.append("{\"lable\":\""+names.get(i)+"\",\"value\":\""+names.get(i)+"\"},");
}
}
System.out.println(sb.toString());
response.getWriter().write(sb.toString());
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
}
页面
<%@ 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 }/resources/css/jquery-ui.css" rel="stylesheet">
<style>
body{
font: 62.5% "Trebuchet MS", sans-serif;
margin: 50px;
}
</style>
<script src="${pageContext.request.contextPath }/resources/js/jquery.js"></script>
<script src="${pageContext.request.contextPath }/resources/js/jquery-ui.js"></script>
<%-- <script src="${pageContext.request.contextPath }/resources/js/jquery.ui.core.js"></script>
<script src="${pageContext.request.contextPath }/resources/js/jquery.ui.autocomplete.js"></script>
<script src="${pageContext.request.contextPath }/resources/js/jquery.ui.position.js"></script>
<script src="${pageContext.request.contextPath }/resources/js/jquery.ui.widget.js"></script> --%>
</head>
<body>
<input id="username" type="text" value="" name="username"/>
</body>
<script type="text/javascript">
//String方式
$(function(){
$("#username").autocomplete({
source:"<c:url value="/auto"/>",
minLength:1
});
});
</script>
</html>
第二种获取数据源方式：回调函数
dao层
package com.dao;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.Statement;
import java.util.ArrayList;
import java.util.List;
import domain.User;
public class Dao2 {
private static Connection getConnection() throws Exception{
Class.forName("com.mysql.jdbc.Driver");
return DriverManager.getConnection("jdbc:mysql://localhost:3306/itac", "root", "root");
}
public static List<User> getNames(String username) throws Exception{
Connection c = getConnection();
Statement stat = c.createStatement();
ResultSet rs = stat.executeQuery("select * from t_user where user_name like '%"+username+"%'");
List<User> users = new ArrayList<User>();
while(rs.next()){
User u = new User();
u.setUserId(Integer.parseInt(rs.getString("user_id")));
u.setUserName(rs.getString("user_name"));
u.setBirth(rs.getString("user_date"));
users.add(u);
}
return users;
}
}
User
package domain;
public class User {
private Integer userId;
private String userName;
private String birth;
//getter setter tostring
}
servlet层
package com.servlet;
import java.io.IOException;
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.Dao2;
import com.google.gson.Gson;
import domain.User;
/**
* Servlet implementation class AutoServlet2
*/
@WebServlet("/auto2")
public class AutoServlet2 extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request, response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8");
System.out.println(request.getParameter("userName"));
try {
List<User> users = Dao2.getNames(request.getParameter("userName"));
Gson gson = new Gson();
String str = gson.toJson(users);
response.getWriter().write(str);
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
}
页面
<%@ 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 }/resources/css/jquery-ui.css" rel="stylesheet">
<style>
body{
font: 62.5% "Trebuchet MS", sans-serif;
margin: 50px;
}
</style>
<script src="${pageContext.request.contextPath }/resources/js/jquery.js"></script>
<script src="${pageContext.request.contextPath }/resources/js/jquery-ui.js"></script>
</head>
<body>
<input type="text" name="userName" id="userName"/>
</body>
<script type="text/javascript">
$("#userName").autocomplete({
source: function( request, response ) {
$.ajax({
type:"post",
url: "<c:url value="/auto2"/>",
dataType: "json",
data:{
userName: request.term
},
success: function( data ) {
response( $.map( data, function( item ) {
return { //lable为下拉列表显示数据源。value为选中放入到文本框的值，这种方式可以自定义显示
lable:item.userName,
value: item.userName
}
}));
}
});
},
minLength: 1,
select: function( event, ui ) { //移动键盘上下键，自动将下拉列表的数据放入到文本框，不过不写这个配置也是可以的，默认就行，具体这个还不知道是做什么
$("#userName").val(ui.item.userName);
}
});
</script>
</html>
第三种方式较简单，直接在页面上放入，比如：
// 本地json数组
var availableTagsJSON = [
{ label: "C# Language", value: "C#" },
{ label: "C++ Language", value: "C++" },
{ label: "Java Language", value: "Java" },
{ label: "JavaScript Language", value: "JavaScript" },
{ label: "ASP.NET", value: "ASP.NET" },
{ label: "JSP", value: "JSP" },
{ label: "PHP", value: "PHP" },
{ label: "Python", value: "Python" },
{ label: "Ruby", value: "Ruby" }
];
$("#local").autocomplete({
source: availableTagsJSON
});
导入相应的js文件，若下拉列表显示样式失效，则可以自己手动设置样式，可在当前页面中添加如下样式：
<style type="text/css">
.ui-auto-complete{
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:#00pacd; /*设置下拉列表中被选中的字体的颜色*/
font-weight:bold; /*设置下拉列表中被选中的字体加粗显示*/
}
</style>
可以利用firebug或者其他工具查看运行时页面引用的样式，然后对其进行修改，通过查看可以发现，页面中引用了.ui-auto-complete和.ui-state-focus类样式，当然，还引用了其他的类样式
csdn主页：
http://my.csdn.net/
jQuery ui autocomplete下拉列表样式失效解决，三种获取数据源方式,的更多相关文章
- jQuery ui autocomplete 与easyUI冲突解决办法（重命名ui的autocomplete 和menu部分）
http://jqueryui.com/download/ UI定制只选autocomplete 会自动把依赖的menu模块也加入进来--然而easyUI也有自己的menu,于是就-- 折腾了好久 ...
- jquery ui autocomplete 实现点击文本框，出现所有查询信息效果,与bootstrap结合使用修改样式
直接看代码 <!doctype html> <html lang="en"> <head> <meta charset="utf ...
- jQuery ui autocomplete选择列表被Bootstrap模态窗遮挡的完美解决方法
转:http://www.cnblogs.com/wiseant/p/4553837.html 最近在一个ASP.NET MVC5项目中使用Bootstrap的模态窗(弹出层)来让用户填写内容,其中的 ...
- jQuery UI Autocomplete Combobox 配 ASP.NET DropDownList
0.引言 1.起因 一开始使用Autocomplete做了一个自动补全的文本框,如上图.后来因业务需要希望能在这个文本框的边上做个下拉列表按钮,一按就展开所有支持 ...
- jQuery UI Autocomplete是jQuery UI的自动完成组件
支持的数据源 jQuery UI Autocomplete主要支持字符串Array.JSON两种数据格式. 普通的Array格式没有什么特殊的,如下: ? 1 ["cnblogs" ...
- jQuery UI AutoComplete的使用
现场提出优化单,Table Mapping里关于获取数据源下所有表名的地方由于表数量过多选择不便,需添加搜索功能.原本的实现是一个Dialog ,现打算将其改为AutoComplete. 框架使用的是 ...
- Jquery ui autocomplete简单api
重要说明:与配置选项类似,Autocomplete插件的方法也不是直接调用,而且通过autocomplete()方法进行间接调用.例如: $("#title").autocompl ...
- jQuery UI Autocomplete是jQuery UI的自动完成组件（share）
官网:http://jqueryui.com/autocomplete/ 以下分享自:http://www.cnblogs.com/yuzhongwusan/archive/2012/06/04/25 ...
- jQuery.ui autoComplete使用
官网 http://api.jqueryui.com/autocomplete/#option-source 参考了 http://www.cnblogs.com/lwme/archive/2012 ...
随机推荐
- LoadRunner参数化之数据生成方式
一般需要使用多条数据来完成实际事务的时候,需要参数化.而使用参数化可以方便实现很多实际事务,记得在哪里看到过,参数化是比C函数更高级的函数. 参数化的方法 先来个最常见的LR示例的登录脚本: Acti ...
- Spring官网改版后下载
Spring官网改版后找了好久都没有找到直接下载Jar包的链接,下面汇总些网上提供的方法,亲测可用. 1.直接输入地址,改相应版本即可:http://repo.springsource.org/lib ...
- OAuth2.0 在 SSO中的应用~
关于OAuth2.0的介绍,请看下面链接(讲的挺好的): http://blog.csdn.net/seccloud/article/details/8192707 我的理解: 一共四个角色,A:Cl ...
- iOS10 UI教程基础窗口的内容与设置起始窗口
iOS10 UI教程基础窗口的内容与设置起始窗口 iOS10 UI教程基础窗口的内容与设置起始窗口,本章我们从iOS10开发中UI的基础知识开始讲解,其中包括了窗口.视图以及UI层次结构和Views的 ...
- 基于netty的微服务架构
基于netty的微服务架构 微服务一篇好文章 http://san-yun.iteye.com/blog/1693759 教程 http://udn.yyuap.com/doc/essential-n ...
- 转：Docker学习---挂载本地目录
原文: http://my.oschina.net/piorcn/blog/324202 docker可以支持把一个宿主机上的目录挂载到镜像里 docker run -it -v /home/dock ...
- CentOS7安装docker出错（Transaction check error）
1. 出错内容: Transaction check error: :-.el7_2..x86_64 conflicts with :-.el7.x86_64 :-.el7_2..x86_64 con ...
- jQuery Cycle Plugin的使用
jQuery幻灯片效果或者Slideshow效果当中如果不考虑touch效果的话,jQuery Cycle插件实在是太强大了,各种高大上的动画效果,如果想加上touch效果可以结合本blog介绍的wi ...
- BFS(八数码) POJ 1077 || HDOJ 1043 Eight
题目传送门1 2 题意:从无序到有序移动的方案,即最后成1 2 3 4 5 6 7 8 0 分析:八数码经典问题.POJ是一次,HDOJ是多次.因为康托展开还不会,也写不了什么,HDOJ需要从最后的状 ...
- 学习angularjs时遇到 XX is not a function
第一次练习就直接没效果: "后不能直接以 function XXXcontroller (){ code......}这样的方式直接注册监听器了. 以后必须angular.mod ...