自己手写的自动完成js类

　　在web开发中，为了提高用户体验，会经常用到输入框的自动完成功能，不仅帮助用户进行快速输入，最重要的是帮助那些“记不全要输入什么”的用户进行选择。这个功能有很多插件已经实现了，为了适应项目的特殊需求，决定自己编写一个具备通用性、扩展性和灵活性的自动完成类，就当是边写边学习了，一举两得。该功能是比较简单的，核心是数据获取方式和导航的实现，简单写了一个，经测试非常好用，还有很多地方需要修改和改进，例如：在原型中只暴露init方法即可，其他方法都需要放到私有空间内，不让用户访问到，这个以后再完善吧。啥也不说了，小二，上菜：

代码如下：（已更新，最新代码请参考：https://github.com/zjh-neverstop/AutoCompleteMulti）

/**
 * 实现自动完成功能的js类
 * 1、数据获取方式：设置静态数据集、ajax方式、自定义数据获取函数
 * 2、可以控制是否启用匹配项的循环选择
 * 3、可以控制是否使用默认静态数据集，在获取动态数据失败的情况下会显示  
  7  */

(function(){

    //封装使用频繁的变量，在构造函数中进行初始化
    var commonObj = {};

    /**
     * 构造函数
     * @param option
     * @constructor
     */
    function AutoComplete(option) {
        //需要实现自动完成功能的页面控件ID
        this.controlId = option.controlId;

        //匹配结果div的id
        this.resultDivId = option.resultDivId;

        //当前选中的项索引，第一项索引为0
        this.index = -1;

        //静态数据集
        this.datas = option.datas;
        
        //动态获取的数据集
        this.dynamicDatas = null;

        //服务器端地址
        this.serverUrl = option.serverUrl;

        //匹配结果集合
        this.resultDatas = null;

        //ajax请求数据
        this.ajaxRequestData = option.ajaxRequestData;

        //主要用在一个后台页面处理多个前端自动完成请求的情况，根据此字段调用具体的后台方法
        this.actionName = option.actionName;

        //是否可以循环选择
        this.circleChoose = option.circleChoose || "true";

        //是否从服务器端获取数据
        this.serverEnabled = option.serverEnabled || "false";
        
        //是否使用静态数据
        //一般情况下，自动完成都是获取动态数据的，开启这个标志后，在获取动态数据失败的情况下会使用静态数据，默认为false
        this.useStaticDatas = option.useStaticDatas||"false";    
        
        //驱动函数
        this.drivenFuc = null;

        //自定义数据获取方法
        this.getCompleteDatas = function (){
            if( typeof option.getCompleteDatas === 'function' ){
                return option.getCompleteDatas();
            }
            else{
                return null;
            }
            
        };


        //私有变量，封装后面常用的4个变量
        //var commonObj = {};

        //通过匿名函数来构造一个类似面向对象语言中的只读属性
        //初始化commonObj变量
        //注意：匿名函数中的this指向windows对象，这里需要将AutoComplete对象的引用赋值给that
        (function(that){
            commonObj =  {
                control : document.getElementById(that.controlId),
                results : document.getElementById(that.resultDivId),
                jControl : $(document.getElementById(that.controlId)),
                jResults : $(document.getElementById(that.resultDivId))
            };
        })(this);

        //只读属性
        /*this.getCommonObj = function(){
            return commonObj;
        }*/

    }

    /**
     * 原型方法，除了init方法和构造函数外，其他方法均需要私有化，待完善...
     */
    AutoComplete.prototype = {

        //指定构造函数
        constructor: AutoComplete,

        //获取事件对象
        getEvent: function() {
            return window.event || arguments[0]; //event ? event : window.event;
        },

        //获取事件源
        getTarget: function(event) {
            return event.target || event.srcElement;
        },

        /**
         * 计算div的偏移量
         * @param obj
         * @returns {{left: (Number|number), top: (Number|number)}}
         */
        getOffset: function(obj) {
            var x = obj.offsetLeft || 0;
            var y = obj.offsetTop || 0;
            var temp = obj;
            while (temp.offsetParent) {
                temp = temp.offsetParent;
                x += temp.offsetLeft;
                y += temp.offsetTop;
            }
            //alert("x:"+x+" y:"+y);
            return { left: x, top: y };
        },

        /**
         * 将tagetDiv定位到sourceDiv下方，与sourceDic左对齐，宽度一致
         * @param sourceDiv
         * @param targetDiv
         */
        positionDiv: function(sourceDiv, targetDiv) {
            var obj = document.getElementById(sourceDiv);
            var xy = this.getOffset(obj);
            $("#" + targetDiv).css("left", xy.left);
            $("#" + targetDiv).css("width", $("#" + sourceDiv).outerWidth());
            $("#" + targetDiv).css("top", (xy.top + $("#" + sourceDiv).outerHeight()));

        },

        init: function() {
            var control = document.getElementById(this.controlId);
            var results = document.getElementById(this.resultDivId);
            var jControl = $(control);
            var jResults = $(results);
            var autoThisObj = this;

            document.onclick = function(event) {
                //$("#"+resultDivId).hide();
                var target = autoThisObj.getTarget(autoThisObj.getEvent(event));
                //alert(target.id);
                if (target.id == autoThisObj.controlId) {
                    return false;
                }
                autoThisObj.clearResults();
            }

            //兼容ie（ie浏览器下，当按下up与down键时，输入框会失去焦点，导致up与down键不起作用）
            jResults.bind("keydown", function(event) {
                jControl.keydown();
                return false;
            });


            //给指定控件绑定keyup事件
            $("#" + autoThisObj.controlId).bind("keyup", function(event) {
                var e = autoThisObj.getEvent(event);
                var keyCode = e.keyCode;
                if ((keyCode == '40' || keyCode == '38' || keyCode == '37' || keyCode == '39' || keyCode == '13' || keyCode == '9')) {
                    return false;
                }

                autoThisObj.index = -1;
                results.scrollTop = 0;

                var keyword = $.trim(jControl.val());
                if (keyword.length == 0) {
                    //jResults.hide();
                    autoThisObj.clearResults();
                    return;
                }
                
                //获取动态数据集，自定义函数的优先级最高
                var autoDatas = autoThisObj.getCompleteDatas();//调用自定义数据获取函数
                if( (autoDatas instanceof Array) && (autoDatas.length > 0) ){  
                    autoThisObj.dynamicDatas = autoDatas;
                }
                else if(autoThisObj.serverEnabled=="true"){  //服务器端获取数据
                    autoThisObj.getAjaxDatas();  
                }
                
                //
                if(autoThisObj.dynamicDatas!=null){
                    autoThisObj.generateHtml(autoThisObj.dynamicDatas);
                }
                else if(autoThisObj.useStaticDatas=="true" && autoThisObj.datas.length>0){
                    autoThisObj.generateHtml(autoThisObj.datas);
                } 
            }); //end keyup()

            this.navigate();
        }, // end init()

        /**
         * 定义 up与down 按键功能
         * @param event
         * @param objectId
         * @returns {boolean}
         */
        navigate: function(event) {

            var control = document.getElementById(this.controlId);
            var results = document.getElementById(this.resultDivId);
            var jControl = $(control);
            var jResults = $(results);

            var autoThisObj = this;

            this.keyDownBind(jControl);

        },  // end navigate()

        /**
         * 给指定jquery元素绑定keydown事件，使其可以进行匹配项的选择
         */
        keyDownBind: function(jObject) {
            var control = document.getElementById(this.controlId);
            var results = document.getElementById(this.resultDivId);
            var jControl = $(control);
            var jResults = $(results);
            var autoThisObj = this;
            jObject.keydown(function(event) {
                var e = autoThisObj.getEvent(event);
                var key = e.keyCode;
                if (i == "" || !i)
                    i = -1;
                else
                    i = parseFloat(i);

                var itemCount = results.childNodes.length;

                if (key == '40') //Down
                {

                    for (var i = 0, len = itemCount; i < len; i++) {
                        results.childNodes[i].className = "item";  //重置
                    }

                    autoThisObj.index++;

                    if (autoThisObj.index > itemCount - 1) {
                        if (autoThisObj.circleChoose == "true") {
                            autoThisObj.index = 0;
                            jResults.scrollTop(0);
                        }
                        else {
                            autoThisObj.index = itemCount - 1;
                        }
                    }

                    try {
                        results.childNodes[autoThisObj.index].className = "item chooseItem";
                        results.childNodes[autoThisObj.index - 1].className = "item";
                    }
                    catch (e) {

                    }

                    //以下两个判断语句用来将当前选中项置于div的可视范围内
                    if (($(results.childNodes[autoThisObj.index]).height() + 4) * (autoThisObj.index + 1) > $(results).scrollTop() + parseInt(results.style.height)) {
                        $(results).scrollTop(($(results.childNodes[autoThisObj.index]).height() + 4) * (autoThisObj.index + 1) - parseInt(results.style.height)); 
                    }
                    if (($(results.childNodes[autoThisObj.index]).height() + 4) * (autoThisObj.index) < $(results).scrollTop()) {
                        $(results).scrollTop(($(results.childNodes[autoThisObj.index]).height() + 4) * (autoThisObj.index)); 
                    }
                }
                else if (key == '38') //UP
                {
                    for (var i = 0, len = itemCount; i < len; i++) {
                        results.childNodes[i].className = "item";  //重置
                    }

                    autoThisObj.index--;
                    if (autoThisObj.index < 0) {
                        autoThisObj.index = 0;
                        if (autoThisObj.circleChoose == "true") {
                            autoThisObj.index = itemCount - 1;
                            results.scrollTop = results.scrollHeight;
                        }
                        else {
                            autoThisObj.index = 0;
                        }
                    }

                    try {
                        results.childNodes[autoThisObj.index].className = "item chooseItem";
                        results.childNodes[autoThisObj.index + 1].className = "item";
                    }
                    catch (e) {

                    }

                    //以下两个判断语句用来将当前选中项置于div的可视范围内
                    if (($(results.childNodes[autoThisObj.index]).height() + 4) * (autoThisObj.index + 1) > $(results).scrollTop() + parseInt(results.style.height)) {
                        $(results).scrollTop(($(results.childNodes[autoThisObj.index]).height() + 4) * (autoThisObj.index + 1) - parseInt(results.style.height)); 
                    }
                    if (($(results.childNodes[autoThisObj.index]).height() + 4) * (autoThisObj.index) < $(results).scrollTop()) {
                        $(results).scrollTop(($(results.childNodes[autoThisObj.index]).height() + 4) * (autoThisObj.index)); 
                    }
                }
                else if (key == '13' || key == '9') // enter/tab
                {
                    if (autoThisObj.index == -1)
                        autoThisObj.index = 0;

                    control.value = results.childNodes[autoThisObj.index].innerHTML;

                    autoThisObj.clearResults();
                    return false;
                }
                else {
                    return;
                }
            }); // end keydown
        },

        /**
         * ajax方式获取匹配结果集
         */
        getAjaxDatas:function(){
            var autoThisObj = this;
            $.ajax({
                url: this.serverUrl,
                data: this.ajaxRequestData,
                type: "POST",
                success: function(returnValue) {
                    if((returnValue instanceof Array)&&(returnValue.length > 0)){
                        autoThisObj.dynamicDatas = returnValue;
                    }
                    else{
                        autoThisObj.dynamicDatas = null;
                    }
                }  //end success()
            }); //end ajax()
        },

        /**
         * 获取数据后生成html，并绑定基本事件
         */
        generateHtml:function(datas){

            //var commonObj = this.getCommonObj();
            var autoThisObj = this;

            var length = datas.length;
            var htmlStr = "";

            if (length > 0) {
                
                for (var i = 0; i < length; i++) {
                    htmlStr += "<div class='item'>" + datas[i] + "</div>";
                }
                
                //htmlStr = "<div class='resultCss' id='"+ autoThisObj.resultDivId +"'>" + htmlStr + "</div>";
                
                commonObj.jResults.html(htmlStr).show();
                

                //计算单个item的高度
                var itemHeight = $(".item").first().outerHeight();

                if (length >= 10) {
                    commonObj.jResults.height(10 * itemHeight);
                }
                else {
                    commonObj.jResults.height(length * itemHeight);
                }

                //调整结果div的宽度并定位
                autoThisObj.positionDiv(autoThisObj.controlId, autoThisObj.resultDivId);

                //默认选中第一项
                autoThisObj.index = 0;
                commonObj.results.childNodes[autoThisObj.index].className = "item chooseItem";

                //给结果集中的每一项添加基本事件
                commonObj.jResults.find(".item").each(function() {
                    //点击事件
                    $(this).on("click", function() {
                        commonObj.jControl.val($(this).html());
                        autoThisObj.clearResults();
                    });

                    //mouseover事件
                    $(this).mouseover(function() {
                        autoThisObj.index = $(this).index();
                        var results = document.getElementById(autoThisObj.controlId);
                        var itemCount = document.getElementById(autoThisObj.resultDivId).childNodes.length;
                        for (var i = 0, len = itemCount; i < len; i++) {
                            document.getElementById(autoThisObj.resultDivId).childNodes[i].className = "item";  //重置
                        }
                        document.getElementById(autoThisObj.resultDivId).childNodes[autoThisObj.index].className = "item chooseItem";

                    });

                });
            }
            else {
                autoThisObj.clearResults();
            }
        },

        /**
         * 清空结果div
         */
        clearResults: function() {
            var results = document.getElementById(this.resultDivId);
            var jResults = $(results);
            results.innerHTML = "";
            jResults.scrollTop(0);
            results.style.display = "none";
            jResults.css("height", "auto");
            this.dynamicDatas = null;
        },

        //重置结果集
        resetResults: function() {
            var results = document.getElementById(this.resultDivId);
            var jResults = $(results);
            jResults.scrollTop(0);
            results.style.display = "none";
            this.index = 0;

            var itemCount = results.childNodes.length;
            for (var i = 0, len = itemCount; i < len; i++) {
                results.childNodes[i].className = "item";  //重置
            }

            results.childNodes[this.index].className = "item chooseItem";
        }

    }

    //将AutoComplete暴露到全局范围
    window.AutoComplete = AutoComplete;
})();

 使用方法示例：

<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>autoComplete测试</title>
    <style type="text/css">
    .item /*每一项的样式*/
    {
        line-height:20px;
        height:20px;
        padding: 2px;
        width:100%;
        overflow: hidden;
    }
    .chooseItem{  /*选中的当前项样式*/
     background-color: #008B8B;
        color:White;
        cursor: pointer;
        height:20px;
        padding: 2px;
        width:100%;
        line-height:20px;
    }
    .resultsCss{ /*匹配结果集容器样式*/
        position:absolute;
        overflow-y:auto; 
        overflow-x:hidden; 
        display:none;
        border:solid 1px gray; 
        background-color:#F0FFFF;
    }
    </style>
    <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="autoCompleteHome.js"></script>
    
    <body>
        <div>
            <label for="inpt">请输入：</label><input type="text" id="inpt" />
        </div>
        <div id="tipList" class="resultsCss">
        </div>
        <script type="text/javascript">
        //方式1：静态数据集
        var staticDatas = ["asd","axcv","qwerfd","dfghj","cvbnm","bbghty","ertgb","trefgc","cssdavb","abcdefg","trefgc","cssdavb","abcdefg"];
        var autoCompleteOption = {
                        controlId: "inpt",
                        resultDivId: "tipList",
                        circleChoose: "true",
                        serverEndbled: "false",
                        useStaticDatas:"true",
                        datas:staticDatas
                    };
            
        var auto = new AutoComplete(autoCompleteOption);
        auto.init();

        //方式2：自定义数据获取函数
        /*
        var autoCompleteOption = {
                        controlId: "inpt",
                        resultDivId: "tipList",
                        circleChoose: "true",
                        getCompleteDatas：function(){
                            var datas = null;
                            //enter your code to get the data
                            return datas;
                        }
                    };
            
        var auto = new AutoComplete(autoCompleteOption);
        auto.init();
        */

        //方式3：ajax获取数据
        /*
        var autoCompleteOption = {
                        controlId: "inpt",
                        resultDivId: "tipList",
                        circleChoose: "true",
                        resultDivId: "tipList",
                        ajaxRequestData:{},
                        serverUrl: "AutoCompleteHandler.ashx"
                    };
            
        var auto = new AutoComplete(autoCompleteOption);
        auto.init();
        */
        </script>
    </body>
</head>
</html>