jquery 自动补全控件(支持IE6)待整理

自动补全控件(兼容IE6)：http://bassistance.de/

download地址：http://jquery.bassistance.de/autocomplete/jquery.autocomplete.zip

 

 

使用这个功能之前：

                    首先要将浏览器双击出来自带的缓存禁用<input type="text" name="pvdn" id="pvdn" size="17"  width="200" value="${pvdn}"  autocomplete='off' ></input>

静态数据方式：

        <link rel="stylesheet"  type="text/css" href="../bayonetcall/js/jquery.autocomplete.css" />
        <script language="javascript" type="text/javascript" src="../js/autocomplete/jquery-1.7.2.min.js"></script>
        <script type="text/javascript" src="../bayonetcall/js/jquery.autocomplete.js"></script>
        <script type="text/javascript">
        <s:iterator value="mapspecialFields[tableName]" status="isSt">
              <s:if test="mapType in {'mb'}">
                <s:if test="null != listSelect[tableName+columnZhName] && listSelect[tableName+columnZhName].size > 0">
                    $(document).ready(function() {
                        //var options = <s:property value='listSelect[tableName+columnZhName]'/>;
                        //var options = ['鲁A','鲁B','鲁C','鲁D','鲁E','鲁F','鲁G','鲁H','鲁I','鲁J','鲁K','鲁L','鲁M','鲁N','鲁O','鲁P','鲁Q','鲁R','鲁S','鲁T','鲁U','鲁V','鲁W','鲁X','鲁Y','鲁Z'];
                        //var options = ['001.黑N','002.沪N','百度','刘德华','liu','刘富荣','刘亦非','男','女','第1','第2','第3','第4','第5','第6','第7','第8','第9','第11','第22','第33','第44','第55','第66','第77','第88','第99','第111','第222','第333','第444','第555','第666','第777','第888','第999','第1111','第2222','第3333','第4444','第5555','第6666','第7777','第8888','第9999'];
                                $("#field_<s:property value="columnZhName"/>").autocomplete(options,{
                                        minChars : 0,//至少需要输入的字符数,默认为1,如果设为0,在输入框内双击或者删除输入框内内容时显示列表
                                        max : 34,//下拉显示项目的个数
                                        width : 200,//下拉列表框的宽度
                                        matchContains:true,//决定比较时是否要在字符串内部查看匹配，例如如为false,有个车牌号为贵A，输入A,就没有结果出来
                                        autoFill : true,//用户选择时自动将用户当前鼠标所在的值填入到input框，默认为false
                                        mustMatch : true,//如果设置为true，autoComplete只会允许匹配的结果出现在输入框，默认为false
                                        matchCase: false,//比较是否开启大小写敏感开关。默认为false
                                        selectFirst:true,//是否自动选择一个项，默认为true
                                        //格式化列表中的条目  
                                        formatItem : function(row, i, max) {
                                            return row[0];
                                        },
                                        //匹配的值
                                        formatMatch : function(row, i, max) {
                                            return row[0];
                                        },
                                        //选择后文本框显示的值
                                        formatResult : function(row) {
                                            return row[0];
                                        }
                                    });
                      });
                </s:if>
              </s:if>
        </s:iterator>

 

动态数据方式：

首先需要json格式数据，两种方式得到json数据

a).java后台：将对象转换为json格式的包名：json-lib-2.4-jdk15.jar,后台转换使用方法

public static String getJSONString(Object object) {
        return JSONArray.fromObject(object).toString();
    }

 

b).javascript前台：

 

 

 

$(document).ready(function() {
    // 供应商
        var requestUrl = "${path}/common/index/getprovider";
        $.ajax( {
            type : "post",//默认为get   
            dataType : "json",
            url : requestUrl,
            success : function(providerList) {
                $("#pvdn").autocomplete(providerList, {
                    minChars : 0,
                    max : 200,
                    width : 200,
                    matchContains : "word",
                    autoFill : true,
                    formatItem : function(row, i, max) {
                        return row.providercode + ":" + row.providerabbr;
                    },
                    formatMatch : function(row, i, max) {
                        return row.providercode + ":" + row.providerabbr;
                    },
                    formatResult : function(row) {
                        return row.providercode + ":" + row.providerabbr;
                    }
                });
            }
        });
    });