AJAX AutoComplete简单的小例子

因为项目需要，写了一个简单的AJAX自动完成的小例子，这里给出代码。
代码没有优化，优化方向是：1.进一步解耦  2.增加本地数据缓存的筛选，减少交互次数  3.优化筛选算法
有兴趣的朋友可以去尝试一下。

/**/ /*
 *    AutoComplete Class
 *  Author: Robin Chen(robchen@126.com)
*/

// AutoComplete Class
var  AutoComplete  =   function (dom,options) ... {
    this.dom = dom;
    this.startPoint = options.startPoint || 3;
    this.JSONService = options.JSONService;
    this.selector = new AutoCompleteSelector(this);
    var __this = this;
    this.selectMode = true;
    this.dom.onfocus = this.dom.onchange = this.dom.onkeyup = function()...{
        setTimeout(function()...{
            if(__this.dom.cacheValue != __this.dom.value)...{
                __this.dom.cacheValue = __this.dom.value;
                __this.search();
            }else...{
                if(__this.dom.value.length >= __this.startPoint)__this.selector.show();    
            }
        },10);
    }
    var onMouseClick = function(evt)...{
        var evt = evt || event;
        var target = evt.target || evt.srcElement;
        if(target != __this.dom && target != __this.selector.dom)...{
            __this.selector.hide();
        }
    }
    try...{
        document.body.attachEvent('onclick',onMouseClick);
    }catch(e)...{
        document.body.addEventListener('click',onMouseClick,false);    
    }
}

AutoComplete.prototype  =   ... {
    request:null,
    dataCache:null,
    createXMLHttpRequest:function()...{
        try...{
            return new XMLHttpRequest();    
        }catch(e)...{
            return new ActiveXObject('Microsoft.XMLHTTP');    
        }
    },
    search:function()...{
        var keyword = this.dom.value;
        if(keyword.length < this.startPoint)return;
        if(this.request)this.request.abort();
        var request = this.request = this.createXMLHttpRequest();
        request.open('GET',this.JSONService + '?keyword=' + escape(keyword),true);
        var __this = this;
        request.onreadystatechange = function()...{
            if(request.readyState == 4 && request.status == 200)...{
                var data = eval('(' + request.responseText + ')');
                __this.parseData.call(__this,data);
            }
        }
        request.send();
    },
    parseData:function(data)...{
        this.dataCache = data;
        this.selector.load(data);
        if(this.selector.dom.getElementsByTagName('div').length > 0)...{
            this.selector.show();
        }else...{
            this.selector.hide();    
        }
    }
}

// AutoCompleteSelector Class
var  AutoCompleteSelector  =   function (autoCompleteObject) ... {
    this.autoCompleteObject = autoCompleteObject;
    if(arguments[1])...{
        this.dom = arguments[1];
    }else...{
        this.dom = this.createDefaultSelectorElement();    
    }
}

AutoCompleteSelector.prototype  =   ... {
    createDefaultSelectorElement:function()...{
        var target = this.autoCompleteObject.dom;
        var obj = target;
        var width = target.offsetWidth;
        var left = target.offsetLeft;
        var top = target.offsetHeight + target.offsetTop;
        if(window.ActiveXObject)...{
            try...{
                obj = obj.parentNode;
                while(obj && obj.style)...{
                    obj = obj.parentNode;
                    left += parseInt(obj.offsetLeft) || 0;
                    top += parseInt(obj.offsetTop) || 0;
                }
            }catch(e)...{}
        }
        var div = document.createElement('div');
        div.className = 'autoCompleteSelector';
        div.style.position = 'absolute';
        div.style.left = left - 1 + 'px';
        div.style.top = top + 'px';
        div.style.width = width  + 'px';
        div.style.height = '200px';
        div.style.overflow = 'auto';
        div.style.display = 'none';
        div.style.zIndex = '1000';
        div.style.border = '1px solid #000';
        div.style.backgroundColor = '#fff';
        document.body.appendChild(div);
        div.autoCompleteSelectorObject = this;
        return div;
    },
    dataCache:[],
    show:function()...{
        this.dom.style.display = 'block';
    },
    hide:function()...{
        this.dom.style.display = 'none';
    },
    load:function(data)...{
        this.clear();
        for(var i = 0; i < data.length; i ++)...{
            this.add(new AutoCompleteSelectItem(data[i],this));
        }
    },
    clear:function()...{
        this.dom.innerHTML = '';
    },
    add:function(item)...{
        this.dom.appendChild(item.dom);    
    },
    remove:function(item)...{
        this.dom.removeChild(item.dom);    
    }
}

// AutoCompleteSelectItem Class
var  AutoCompleteSelectItem  =   function (data,autoCompleteSelectorObject) ... {
    this.name = data.name;
    this.value = data.value;
    this.dataCache = data;
    this.autoCompleteSelectorObject = autoCompleteSelectorObject;
    this.dom = this.create();
    var __this = this;
    this.dom.onclick = function()...{
        __this.autoCompleteSelectorObject.autoCompleteObject.dom.cacheValue = __this.name;
        __this.autoCompleteSelectorObject.autoCompleteObject.dom.value = __this.name;
        __this.autoCompleteSelectorObject.hide();
    }
}
AutoCompleteSelectItem.prototype  =   ... {
    create:function()...{    
        var div = document.createElement('div');
        div.className = 'autoCompleteSelectItem';
        div.style.width = 'auto';
        div.style.height = '14px';
        div.style.fontSize = '11px';
        div.style.lineHeight = '14px';
        div.style.textAlign = 'left';
        div.style.padding = '2px';
        div.style.borderBottom = '1px solid #ccc';
        div.style.color = '#000';
        div.style.backgroundColor = '#fff';
        div.style.overflow = 'hidden';
        div.onmouseover = function()...{
            this.style.backgroundColor = '#999';
            this.style.color = '#fff';
            this.style.cursor = 'pointer';
        }
        div.onmouseout = function()...{
            this.style.backgroundColor = '#fff';
            this.style.color = '#000';
        }
        div.innerHTML = this.name;
        div.autoCompleteSelectItem = this;
        return div;
    }
}

使用方法是：
var autoCompleteController = new AutoComplete(document.getElementById('keyword'),{
            startPoint:3,
            JSONService:'autocomplete.php'
        });

后台页面(比如：autocomplete.php)接受一个GET方式提交的keyword参数，返回类似
[{"name":"Test1","value":"1"},{"name":"Test2","value":"2"}]
的JSON字符串即可