首页 > 代码库 > 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完成自动匹配的的下拉列表步骤