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;
    }
时间: 2024-10-04 23:22:31

JQuery UI完成自动匹配的的下拉列表步骤的相关文章

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

http://www.runoob.com/jqueryui/example-autocomplete.html 自定义数据并显示 您可以使用自定义数据格式,并通过简单地重载默认的聚焦和选择行为来显示数据. 尝试键入 "j",或者按向下箭头按键,即可得到一个项目列表. <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <

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

支持的数据源 jQuery UI Autocomplete主要支持字符串Array.JSON两种数据格式. 普通的Array格式没有什么特殊的,如下: ? 1 ["cnblogs","博客园","囧月"] 对于JSON格式的Array,则要求有:label.value属性,如下: ? 1 [{label: "博客园", value: "cnblogs"}, {label: "囧月", v

jQuery UI Autocomplete自动补全

项目上用到solr搜索引擎,在输入框输入字符的时候,想做到类似百度的效果,下拉框出现10个建议词条,为此,用上了jQuery UI Autocomplete 做自动补全 jsp页面样例: <%@ page language="java" contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%> <%@ include file="/WEB-INF/view

Jquery Ui AutoComplete自动填写的功能

用到的jquery 和jquery ui 的版本如下: jQuery v1.12.4 jQuery UI - v1.11.0 有部分版本会有一些这样那样的问题,具体原因未深究. jquery 的代码如下 $("#id_customer").autocomplete({ source:function (request,response) { var findResult = []; $.ajax({ url:"/ips/get_customername_list/"

jquery ui autoComplete自动完成

官网:http://jqueryui.com/autocomplete 最简单的形式: var availableTags = [ "ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure",  ]; $( "#tags" ).autocomplete({ source:

jquery UI邮箱自动补全

<1> 自动补全(autocomplete),是一个可以减少用户输入完整信息的UI 工具.一般在输入邮箱.搜索关键字等,然后提取出相应完整字符串供用户选择. <html> <head> <title></title> <script src="js/jquery-1.11.2.js"></script> <script src="js/jquery-ui.js"><

07 Jquery UI Autocomplete 自动补全插件

原文地址:https://www.cnblogs.com/springsnow/p/9461710.html

solr进阶八:jQuery UI Autocomplete与solr搜索结合

大致的流程: 页面捕获到文字 --> 传到servlet(Controller)层,servlet层调用后台 --> 后台根据servlet层传来的参数进行动态从solr中获取数据 --> solr 数据返回到servlet层,解析 --> 展现到页面上. 在solr里面新建一个core,在MySQL数据库里面新建一个表,从这个表导入数据到solr的core中,具体步骤可以上网查或者看我前面的教程. SQL语句: SET FOREIGN_KEY_CHECKS=0; -- -----

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

使用jQuery ui首先需要引入jQuery类库,jQuery ui js脚本和jQuery ui css样式表.代码示例如下: <script src="js/jquery-1.7.1.js"></script> <script src="js/jquery-ui-1.8.18.custom.min.js"></script> <link rel="stylesheet" type=&qu