JQuery UI完成自动匹配的的下拉列表步骤
1.先引入jquery ui相关的js,如:jquery-ui-1.10.4.js
2.写js
<script type="text/javascript">
$(function(){
setAutoComplete();
});
/* 配件号自动完成 */
function setAutoComplete(){
$('.class_name').each(function() {
$(this).autocomplete({
source:"/admin/class_getClassNameList.do",
//用户最少输入的个数
minLength: 4
});
});
}
</script>
3.写Java代码:
(1).action:
/**
* 获取班级列表
* @date 2017年7月11日下午1:24:22
* @author songchunyan
* @return
*/
public String getClassNameList(){
try {
//传的参数,默认值是term
String input = request.getParameter("term");
List<String> partNoList = ElTrainClassService.getNmdyClassNameList(input);
String json = JSONUtil.serialize(partNoList);
this.writeHtml(json); return null;
} catch (DolException e) {
logger.error(e.getMessage(),e);
return handleDolException(e);
} catch (Exception e) {
logger.error(e.getMessage(),e);
return handleException(e);
}
}
(2).service:
/**
* 获取班级下拉列表
* @date 2017年7月11日下午1:26:42
* @author songchunyan
* @param input
* @return
* @throws Exception
*/
public static List<String> getNmdyClassNameList(String input) throws Exception{
DbBase db = null;
try {
db = new DbBase();
return ElTrainClassDao.getNmdyClassNameList(db,input);
} catch (Exception e) {
logger.error("getNmdyClassNameList error:" + e.toString(),e);
throw e;
} finally {
if (db != null) {
db.release();
}
}
}
3.dao:
/**
* 获取班级下拉列表
* @date 2017年7月11日下午1:28:14
* @author songchunyan
* @param db
* @param input
* @return
* @throws Exception
*/
public static List<String> getNmdyClassNameList(DbBase db, String input) throws Exception{
StringBuffer sql = new StringBuffer();
sql.append("SELECT train_class_uid,train_class_name FROM el_tms_offline_train_class etotc,tbl_research tr");
sql.append(" WHERE etotc.train_uid = tr.train_uid");
sql.append(" and etotc.begin_time <= now()");
sql.append(" and tr.isNmdy='Y'");
sql.append(" and train_class_name like concat('%',?,'%')");
sql.append(" limit 10");
db.initPS(sql.toString());
db.setPSString(1, input);
ResultSet rs = db.executeQuery(); List<String> list = new ArrayList<String>();
while (rs.next()) {
//cu = new ElTrainClass();
//cu.setTrainClassUid(rs.getString("train_class_uid"));
//cu.setTrainClassName(rs.getString("train_class_name"));
list.add(rs.getString("train_class_name"));
}
rs.close();
return list;
}
JQuery UI完成自动匹配的的下拉列表步骤的更多相关文章
- 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)
http://www.runoob.com/jqueryui/example-autocomplete.html 自定义数据并显示 您可以使用自定义数据格式,并通过简单地重载默认的聚焦和选择行为来显示 ...
- jquery ui autoComplete自动完成
官网:http://jqueryui.com/autocomplete 最简单的形式: var availableTags = [ "ActionScript", "Ap ...
- jQuery ui 利用 datepicker插件实现开始日期(minDate)和结束日期(maxDate)
这篇文章主要介绍了jQuery ui 利用 datepicker插件实现开始日期(minDate)和结束日期(maxDate),需要的朋友可以参考下 使用jQuery ui首先需要引入jQuery类库 ...
- 可输入自动匹配Select——jquery ui autocomplete
<!doctype html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- jQuery ui autocomplete下拉列表样式失效解决,三种获取数据源方式,
jQuery有很多很多的已经实现,很漂亮的插件,autocomplete就是其中之一.jQuery ui autocomplete主要支持字符串Array.JSON两种数据格式,jQuery ui b ...
- Jquery UI - DatePicker 在Dialog中无法自动隐藏的解决思路
通过Jquery UI Dialog模态展示如下的一个员工编辑页面,但是遇到一个奇怪的问题:点击Start Date的input元素后,其无法失去焦点.从而导致DatePicker控件在选择日期后无法 ...
- 基于Jquery UI的autocompelet改写,自动补全控件,增加下拉选项,动态设置样式,点击显示所有选项,并兼容ie6+
Jquery UI的autocompelete改写 注意:实现功能,除了原版的自动补全内容外,增加一个点击显示所有选项,样式能动态设置. 加载数据的来源为后台数据库读取. 具体代码如下: 引用 从官方 ...
随机推荐
- java中的jdk配置详解:
1.配值系统变量"JAVA_HOME" 变量名JAVA_HOME: 指向:JDK(java开发工具包)的安装路径 目的:使用JDK安装目录时,可以直接通过”%JAVA_HOME%“ ...
- 论文笔记:CNN经典结构2(WideResNet,FractalNet,DenseNet,ResNeXt,DPN,SENet)
前言 在论文笔记:CNN经典结构1中主要讲了2012-2015年的一些经典CNN结构.本文主要讲解2016-2017年的一些经典CNN结构. CIFAR和SVHN上,DenseNet-BC优于ResN ...
- Machine learning 第5周编程作业
1.Sigmoid Gradient function g = sigmoidGradient(z) %SIGMOIDGRADIENT returns the gradient of the sigm ...
- go 语言学习 1
Go语言命名 Go语言关键字 1.Go语言有25个关键字: 2.关键字用途: var :用于变量的声明const :用于常量的声明type :用于声明类型func :用于声明函数和方法package ...
- centos 7 上安装 testlink 1.9.15/1.9.16/1.9.17/1.9.18 (mysql/php/httpd)
1.9.18 的System Requirements - server.注意,适用于 1.9.15 及以后. Server environment should consist of: web-se ...
- IO流(三)其他流与File类
1:其他的流 1: DataOutputStream ;多了一些操作基本数据类型的功能 DataInputStream:读取文件. 用DataOutputStream流写进去的数据,就用DataInp ...
- ftp&nginx搭建图片服务器
下面使用ftp+nginx搭建一个简单的服务器 ftp用于文件的传输 nginx提供http服务 nginx服务器的安装和配置可以参照之前的教程:nginx安装及其配置详细教程 下面介绍ftp服务的安 ...
- PHP之mb_check_encoding使用
mb_check_encoding (PHP 4 >= 4.4.3, PHP 5 >= 5.1.3, PHP 7) mb_check_encoding - Check if the str ...
- Java面试题-Java容器
一.Java容器分类 Java容器划分为两个概念Collection.Map Collection: 一个独立元素的序列,这些元素都服从一条或多条规则.List必须按照插入的顺序保存元素,不关心是否重 ...
- ASP.NET Core 中的依赖注入
目录 什么是依赖注入 ASP .NET Core 中使用依赖注入 注册 使用 释放 替换为其它的 Ioc 容器 参考 什么是依赖注入 软件设计原则中有一个依赖倒置原则(DIP),为了更好的解耦,讲究要 ...