首页 > 代码库 > JQuery UI完成自动匹配的的下拉列表步骤
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完成自动匹配的的下拉列表步骤
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。