自动补全autoComplete在dwz框架的使用

dwz框架使用autoComplete自动补全

1、下载autoComplete相关的js，css文件，地址http://docs.jquery.com/Plugins/Autocomplete 。引入dwz，dwz框架引入js的页面一般为index.html，如图

2、在需要自动补全的搜索页面添加js代码

本次的思路：根据input搜索框输入的字段值，用ajax去后台得到备选值，因为$（"#XXX"）.autocomplete的source要求的数据为数组或json数据

搜索框代码，其中autoCompleteCommon为自动补全，autoCompleteCommonOnclick为扩展功能，点击input框显示初始的备选值：

<input type="text" name="recNotionalCurrency" value="${(recNotionalCurrency)!}" 
                        id="autocomplete_swap_recNotionalCurrency"
                    tableName="T2_R_CURRENCY" refName="CURRENCY_CODE" where=""
                    fetch="15" οninput="autoCompleteCommon(this.id)" οnclick="autoCompleteCommonOnclick(this.id)"/>
                    </li>

 

js代码：

function autoCompleteCommon(id){
        var a = document.getElementById(id);
        var tableName = a.getAttribute("tableName");
        var refName = a.getAttribute("refName");
        var where = a.getAttribute("where");
        var fetch = a.getAttribute("fetch");

        var value = a.value;
        var urlData = "autoCompleteController/getAutoData.do?refName=" + refName
                + "&tableName=" + tableName+"&value="+value+"&where="+where+"&fetch="+fetch;
        var availableTags = new Array();
        availableTags=LaunchAjax(urlData,"","json");
        $("#"+id).autocomplete({
               source:availableTags,
               minChars:0,
             });
      }    

function autoCompleteCommonOnclick(id){
        a = document.getElementById(id);
        var tableName = a.getAttribute("tableName");
        var refName = a.getAttribute("refName");
        var where = a.getAttribute("where");
        var fetch = a.getAttribute("fetch");

        var value = a.value;
        var urlData = "autoCompleteController/getAutoData.do?refName=" + refName
                + "&tableName=" + tableName+"&value="+value+"&where="+where+"&fetch="+fetch;
        var availableTags = new Array();
        availableTags=LaunchAjax(urlData,"","json");
        $("#"+id).autocomplete({
              source: availableTags,
              minLength: 0
            });
       $("#"+id).autocomplete('search', '');
    }

function LaunchAjax(url,data,dataType){//调用ajax的公用方法
    var result;
    $.ajax({
        async: false,
        type: 'POST',
        url: url,
        data: data,
        dataType:dataType,
        success:function(data){
            result = data;
        },
        error:function(){
            alert("信息错误！");
            }
    });
    return result;
}

 

后台代码:

public List<String> getAutoData(String refName, String tableName, 
            String value, String where, String fetch) {

        List<String> result = new ArrayList<String>();

        if (StringUtil.notEmpty(refName)) {
            StringBuffer sqlselect = new StringBuffer("select ");

            String[] refarray = refName.split(",");
            StringBuffer whereBuf = new StringBuffer();
            whereBuf.append("(" + refarray[0]).append(" like '%" + value + "%'");
            if (refarray.length > 1) {
                for (int i = 1; i < refarray.length; i++)
                    whereBuf.append(" or ").append(refarray[i]).append(" like '%" + value + "%'");

            }
            sqlselect.append(refName).append(" from " + tableName + " where " + whereBuf.toString() + ")");
            CgFormHeadEntity head = tableService.getHeadEntity(tableName);
            if (StringUtil.notEmpty(where))
                sqlselect.append(" and " + where);

            if (StringUtil.notEmpty(fetch))
                sqlselect.append(" and rownum<=" + fetch);
            List<Map<String, Object>> list = new ArrayList<Map<String, Object>>();

            try {
                list = DatabaseUtils.getResultFormDB(head.getSource().getDbKey(), sqlselect.toString(),
                        new ArrayList());   //根据拼接的sql语句，查询数据库，得到数据
            } catch (Exception e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
            }
            if (list != null && list.size() > 0) {
                StringBuffer data = new StringBuffer();
                for (Map<String, Object> map : list) {
                    data.append(map.get(refarray[0]).toString());
                    if (refarray.length > 1) {
                        data.append("(");
                        for (int j = 1; j < refarray.length; j++) {
                            data.append(map.get(refarray[j].toUpperCase()).toString() + "_");
                        }
                        data.append(")");

                    }
                    String dataResult = data.toString().replace("_)", ")");
                    result.add(dataResult);
                    data.setLength(0);

                }

            }
        }
        return result;
    }