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完成自动匹配的的下拉列表步骤的更多相关文章

  1. jQuery UI Autocomplete是jQuery UI的自动完成组件(share)

    官网:http://jqueryui.com/autocomplete/ 以下分享自:http://www.cnblogs.com/yuzhongwusan/archive/2012/06/04/25 ...

  2. jQuery UI Autocomplete是jQuery UI的自动完成组件

    支持的数据源 jQuery UI Autocomplete主要支持字符串Array.JSON两种数据格式. 普通的Array格式没有什么特殊的,如下: ? 1 ["cnblogs" ...

  3. jQuery UI 实例 - 自动完成(Autocomplete)

    http://www.runoob.com/jqueryui/example-autocomplete.html 自定义数据并显示 您可以使用自定义数据格式,并通过简单地重载默认的聚焦和选择行为来显示 ...

  4. jquery ui autoComplete自动完成

    官网:http://jqueryui.com/autocomplete 最简单的形式: var availableTags = [ "ActionScript", "Ap ...

  5. jQuery ui 利用 datepicker插件实现开始日期(minDate)和结束日期(maxDate)

    这篇文章主要介绍了jQuery ui 利用 datepicker插件实现开始日期(minDate)和结束日期(maxDate),需要的朋友可以参考下 使用jQuery ui首先需要引入jQuery类库 ...

  6. 可输入自动匹配Select——jquery ui autocomplete

    <!doctype html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  7. jQuery ui autocomplete下拉列表样式失效解决,三种获取数据源方式,

    jQuery有很多很多的已经实现,很漂亮的插件,autocomplete就是其中之一.jQuery ui autocomplete主要支持字符串Array.JSON两种数据格式,jQuery ui b ...

  8. Jquery UI - DatePicker 在Dialog中无法自动隐藏的解决思路

    通过Jquery UI Dialog模态展示如下的一个员工编辑页面,但是遇到一个奇怪的问题:点击Start Date的input元素后,其无法失去焦点.从而导致DatePicker控件在选择日期后无法 ...

  9. 基于Jquery UI的autocompelet改写,自动补全控件,增加下拉选项,动态设置样式,点击显示所有选项,并兼容ie6+

    Jquery UI的autocompelete改写 注意:实现功能,除了原版的自动补全内容外,增加一个点击显示所有选项,样式能动态设置. 加载数据的来源为后台数据库读取. 具体代码如下: 引用 从官方 ...

随机推荐

  1. table组件选中数据回显

    table组件多选状态下,把已选择的数据回显,需要在多选列上加上一个属性 :reserve-selection="true" 实例如下: <el-table :data=&q ...

  2. [BZOJ 1056][HAOI2008]排名系统

    传送门 \(\color{green}{solution}\) \(fhq \_treap\)模板题. 对于 \(+\) 操作,如果当前人不存在,那么直接加入;如果存在,那么先将他删除,再加入.复杂度 ...

  3. 洛谷 P4774 / loj 2721 [NOI2018] 屠龙勇士 题解【同余】【exgcd】【CRT】

    推导过程存在漏洞+exCRT板子没打熟于是期望得分÷实际得分=∞? 题目描述 小 D 最近在网上发现了一款小游戏.游戏的规则如下: 游戏的目标是按照编号 \(1\sim n​\) 顺序杀掉 \(n​\ ...

  4. Windows网络服务渗透攻击分类

    网络服务渗透攻击分为三类 一.针对于windows系统自带的网络服务的渗透攻击 1.针对于NetBIOS的攻击 NetBIOS以运行在TCP/IP系统中的NBT协议来实现,具体包括在UDP的137端口 ...

  5. 织梦dede解决“更新数据库archives表时出错"方法

    登陆dedecms网站管理后台,选择执行 sql命令工具,将下列命令执复制进去并执行多行执行,该问题就可以解决. alter table `idea_archives` ADD `voteid` me ...

  6. (转载)Android xml资源文件中@、@android:type、@*、?、@+引用写法含义以及区别

    原帖地址:http://blog.csdn.net/zfrong/article/details/7332545 Android xml资源文件中@.@android:type.@*.?.@+引用写法 ...

  7. Android多媒体技术之音频播放

    1.Android中音频播放的方式和区别. MediaPlayer:主要用于播放音频,可以播放视频,但是一般不用其进行视频播放. SoundPool:主要用于播放一些短促的声音片段,主要优势是cpu资 ...

  8. 《Algorithms算法》笔记:元素排序(4)——凸包问题

    <Algorithms算法>笔记:元素排序(4)——凸包问题 Algorithms算法笔记元素排序4凸包问题 凸包问题 凸包问题的应用 凸包的几何性质 Graham 扫描算法 代码 凸包问 ...

  9. Struts html(标签)

    一 <html:form> <html:form>用来创建表单,<html:form>必须包含一个action属性,否则JSP会抛出一个异常. 1.常用属性: Ac ...

  10. PHP中return,exit,die的区别

    参考:die(),exit(),return的区别 1.die() 是遇到错误才停止,停止程序运行,输出内容(是程序级别的) 2.exit,exit():是一个函数 是停止程序运行,前者不输出内容:后 ...