• autocomplete自动完成


    //效果图

    //jsp引入文件
    
    <c:set var="ctx" value="${pageContext.request.contextPath}"/>
    
    <link rel="stylesheet" type="text/css" href="${ctx}/css/jquery.autocomplete.css" />
    
    <script src="${ctx}/javascripts/jquery.autocomplete.js" type="text/javascript"></script>
    //js代码
    $("#equipName").flushCache();    //刷新缓存
    $("#equipName").autocomplete("${ctx}/dp/takePoints!getUnits.action",{
      max: 30, //列表里的条目数
      minChars: 0, //自动完成激活之前填入的最小字符
       92, //提示的宽度,溢出隐藏
      scrollHeight: 300, //提示的高度,溢出显示滚动条
      matchContains: true, //包含匹配,就是data参数里的数据,是否只要包含文本框里的数据就显示
      //autoFill: false, //自动填充
      mustMatch:true, //true:只会允许匹配的结果出现在输入框,默认为false
      dataType: "json",
      //multiple: false, //是否多个值(“,”隔开)
      //matchSubset:true,
      extraParams: {
        equiptext: function(){ return encodeURIComponent($("#equipName").val()); }
      },
      parse: function(data) {
        var datas = new Array();
        if(data !=null && data.length > 0){
          $.each(data, function(i,item) {
            var _data = {
              data:item,
              value:item.name,
              result:item.name
            }
          datas.push(_data);
          })
        }
        return datas;
      },
      formatItem: function(row, i, max) {
        return row.name;
      },
      formatResult: function(row) {
        return row.name;
      }
    }).result(function(e, item, value) {
      $("#equipName").val(row.name);
    });
    //service代码
    
    @Override
    public List<Map<String, Object>> findUnits(String equiptext) {
      List<Map<String, Object>> dataList = new ArrayList<>();
      StringBuffer sb = new StringBuffer();
      List<Object> params = new ArrayList<>();
      sb.append(" from Unit obj where (1=1) ");
    
      if(equiptext != null && equiptext.length()>0){
        sb.append(" and obj.equipAlias like ? ");
        params.add("%"+equiptext+"%");
      }
      List<Unit> units = this.find(sb.toString(), params, null);
      if(units != null && units.size()>0){
        for (Unit unit : units) {
          Map<String, Object> map = new HashMap<>();
          map.put("name", unit.getEquipAlias());
          map.put("id", unit.getId());
          dataList.add(map);
        }
      }
      return dataList;
    }
    //action代码
    
    public void getUnits() throws UnsupportedEncodingException {
      ITakePointsMap pointsMap = (ITakePointsMap) this.getMap();
      List<Map<String, Object>> units = pointsMap.findUnits(URLDecoder.decode(equiptext,"UTF-8"));
      JSONArray jsonArray = JSONArray.fromObject(units);
      ResponseUtil.print(jsonArray.toString());
      
    }
  • 相关阅读:
    中国字实现——最大双向匹配
    [Nuxt] Build a Vue.js Form then use Vuex Actions to Post to an API in Nuxt
    [Nuxt] Build a Navigation Component in Vue.js and Use in a Nuxt Layout
    [Nuxt] Navigate with nuxt-link and Customize isClient Behavior in Nuxt and Vue.js
    [Nuxt] Load Data from APIs with Nuxt and Vuex
    [Nuxt] Add Arrays of Data to the Vuex Store and Display Them in Vue.js Templates
    [Nuxt] Add CSS Libraries to Nuxt
    [Nuxt] Update Vuex State with Mutations and MapMutations in Vue.js
    [Nuxt] Setup a "Hello World" Server-Rendered Vue.js Application with the Vue-CLI and Nuxt
    [TypeScript] Define a function type
  • 原文地址:https://www.cnblogs.com/hnzkljq/p/10868081.html
Copyright © 2020-2023  润新知