原生js实现autocomplete插件

在实际的项目中，能用别人写好的插件实现相关功能是最好不过，为了节约时间成本，因为有的项目比较紧急，没充分时间让你自己来写，即便写了，你还要花大量时间调试兼容性。但是出于学习的目的，你可以利用闲暇时间，自己动手写写，看一些原生js的东西，根据自己的思路做插件，这样能提高水平。
说到autotemplete，好多人都用过，引用autotemplete.js,然后就可以实现在输入框输入值的时候提示下拉选项，类似于百度搜索框那种提示功能，下面就来说说自己的思路。
为输入框添加input事件
1.input事件兼容性代码如下：

AddEvt：function(ele, evt, fn) {      if (document.addEventListener) {        ele.addEventListener(evt, fn, false);      } else if (document.attachEvent) {        ele.attachEvent('on' + (evt == "input" ? "propertychange" : evt), fn);      } else {        ele['on' + (evt == "input" ? "propertychange" : evt)] = fn;      }    }

input事件和其他的事件不一样，低版本的ie不支持input事件，只能用propertychange事件，高版本的ie和w3c标准浏览器支持input事件
2.输入事件触发的时候获取数据
这里数据有两种形式，一种是直接设置的对象数组，一种是ajax请求返回数据
这时候我们需要一个ajax请求函数，这里写了一个get请求

get: function(url, paraobj, fn, timeout) {        var xhr = null;        try {          ////兼容firefox,chrom          if (window.XMLHttpRequest) {            xhr = new XMLHttpRequest();          }          //////兼容IE          else if (Window.ActiveXObject) {             xhr = new ActiveXObject("Msxml2.Xmlhttp");          }        } catch (e) {          //TODO handle the exception          xhr = new ActiveXObject('Microsoft.Xmlhttp');        }        xhr.onreadystatechange = function() {          if (this.readyState == 4 && this.status == 200) {            fn.call(this, this.responseText);           } else {            setTimeout(function() {                xhr.abort();            }, timeout);          }        };        var parastr = '';        parastr += "?";        for (var prop in paraobj) {          parastr += prop + "=" + paraobj[prop] + "&";        }         xhr.open('get', parastr != "?" ? (url + parastr) : url, true);         xhr.send();       }

3. ajax请求成功，且有数据的时候创建下拉框并在下拉框中追加选项       ////创建下拉Div
创建下拉框代码：

createShowDiv: function() {       ///如果下拉div已存在，删除掉      var parentNode = this.autoElement.parentNode || this.autoElement.parentElement;      var childNodes = parentNode.childNodes;      var showDiv = document.getElementById(this.config.showdivId);      if (showDiv) {        parentNode.removeChild(showDiv);      }      //创建下拉Div      var div = document.createElement('div');      div.id = this.config.showdivId;      //设置下拉div样式      var style = this.config.style || {        width: '200px',        height: 'auto',        backgroundColor: '#1c5683',        cursor: 'pointer',        display: 'block'      };<br>           for (var prop in style) {        div.style[prop] = style[prop];      }      this.showdiv = div;    }