原生js编写autoComplete插件

最近有提关于下拉选项过多的时候，希望输入关键词，可以搜索内容的需求，但是之前项目太赶，所以也就没有来得及做，因为希望用原生js写一些内容，所以插件是采用了原生js写的思路如下
第一步：fnInit实现初始化一些字段
第二步：加载搜索框的div
第三步：实现search功能，删除原节点并加载新节点
第四步：点击或者回车的时候设置value
代码：
autoComplete.js

/**
* @summary   AutoComplete
* @description 输入框自动检索下拉选项
* @version   0.0.1
* @file     autoComplete.js
* @author   cangowu
* @contact   1138806090@qq.com
* @copyright  Copyright 2016 cangoWu.
*
* 这是一个基于原生js的自动完成搜索的下拉输入框，
* 可以通过移动鼠标上下键回车以及直接用鼠标点击
* 选中搜索的选项，在一些关键的地方都有注释
*
* 实例参见:
* CSDN博客：http://blog.csdn.net/wzgdjm/article/details/51122615
* Github：https://github.com/cangowu/autoComplete
*
*/
(function () {

function AutoComplete() {
   if (!(this instanceof AutoComplete)) {
     return new AutoComplete();
   }
   this.sSearchValue = '';
   this.index = -1;
 }

AutoComplete.prototype = {
   fnInit: function (option) {//初始化基本信息
     var oDefault = {
       id: '', //控件id
       data: [], //数据
       paraName: '',
       textFiled: '', //显示的文字的属性名
       valueFiled: '', //获取value的属性名
       style: {}, //显示的下拉div的样式设置
       url: '', //ajax请求的url
       select: function () {
       }, //选择选项时触发的事件
     };
     var _option = option;

this.sId = _option.id || oDefault.id;
     this.aData = _option.data || oDefault.data;
     this.paraName = _option.paraName || oDefault.paraName;
     this.sTextFiled = _option.textFiled || oDefault.textFiled;
     this.sValueFiled = _option.valueFiled || oDefault.valueFiled;
     this.style = _option.style || oDefault.style;
     this.sUrl = _option.url || oDefault.url;
     this.fnSelect = _option.select || oDefault.select;
     this.sDivId = this.sId + new Date().getTime();//加载选项额divid

//判断如果传入了url,没有传入data数据，就ajax获取数据，否则使用data取数据
     if (this.sUrl !== '' && this.aData.length === 0) {
       var that = this;
       this.util.fnGet(this.sUrl, function (data) {
         console.log(eval(data));
         that.aData = eval(data);
       }, 10);
     }

//给aData排序
     var sTextField = this.sTextFiled;
     this.aData.sort(function (a, b) {
       return a[sTextField] > b[sTextField];
     });
     //获取控件
     this.domInput = document.getElementById(this.sId);
     //this.domDiv = document.getElementById(this.sDivId);
   },
   fnRender: function () {//渲染一些必须的节点
     var that = this;
     //生成一个对应的div，承载后面的一些选项的
     if (that.sDivId) {
       var domDiv = document.createElement('div');
       domDiv.id = that.sDivId;
       domDiv.style.background = '#fff';
       domDiv.style.width = that.domInput.offsetWidth - 2 + 'px';
       domDiv.style.position = 'absolute';
       domDiv.style.border = '1px solid #a9a9a9';
       domDiv.style.display = 'none';
       that.util.fnInsertAfter(domDiv, that.domInput);

//加载之后才能将domDiv赋值为
       this.domDiv = document.getElementById(this.sDivId);
     }
     //给input添加keyup事件
     that.util.fnAddEvent(that.domInput, 'keyup', function (event) {
       that.fnSearch(event);
     });
   },
   fnSearch: function (event) {
     //判断如果不是回车键，上键下键的时候执行搜索
     if (event.keyCode != 13 && event.keyCode != 38 && event.keyCode != 40) {
       this.fnLoadSearchContent();
       this.fnShowDiv();
     } else {//搜索之后监测键盘事件
       var length = this.domDiv.children.length;
       if (event.keyCode == 40) {
         ++this.index;
         if (this.index >= length) {
           this.index = 0;
         } else if (this.index == length) {
           this.domInput.value = this.sSearchValue;
         }
         this.domInput.value = this.domDiv.childNodes[this.index].text;
         this.fnChangeClass();
       }
       else if (event.keyCode == 38) {
         this.index--;
         if (this.index <= -1) {
           this.index = length - 1;
         } else if (this.index == -1) {
           this.obj.value = this.sSearchValue;
         }
         this.domInput.value = this.domDiv.childNodes[this.index].text;
         this.fnChangeClass();
       }
       else if (event.keyCode == 13) {
         this.fnLoadSearchContent();
         this.fnShowDiv();
         //this.domDiv.style.display = this.domDiv.style.display === 'none' ? 'block' : 'none';
         this.index = -1;
       } else {
         this.index = -1;
       }
     }
   },
   fnLoadSearchContent: function () {
     //删除所有的子节点
     while (this.domDiv.hasChildNodes()) {
       this.domDiv.removeChild(this.domDiv.firstChild);
     }
     //设置search的值
     this.sSearchValue = this.domInput.value;
     //如果值为空的时候选择退出
     var sTrimSearchValue = this.sSearchValue.replace(/(^\s*)|(\s*$)/g, '');
     if (sTrimSearchValue == "") {
       this.domDiv.style.display = 'none';
       return;
     }
     try {
       var reg = new RegExp("(" + sTrimSearchValue + ")", "i");
     }
     catch (e) {
       return;
     }
     //搜索并增加新节点
     var nDivIndex = 0;
     for (var i = 0; i < this.aData.length; i++) {
       if (reg.test(this.aData[i][this.sTextFiled])) {
         var domDiv = document.createElement("div");
         //div.className="auto_onmouseout";
         domDiv.text = this.aData[i][this.sTextFiled];
         domDiv.onclick = this.fnSetValue(this);
         domDiv.onmouseover = this.fnAutoOnMouseOver(this, nDivIndex);
         domDiv.innerHTML = this.aData[i][this.sTextFiled].replace(reg, "<strong>$1</strong>");//搜索到的字符粗体显示
         this.domDiv.appendChild(domDiv);
         nDivIndex++;
       }
     }
   },
   fnSetValue: function (that) {
     return function () {
       that.domInput.value = this.text;
       that.domDiv.style.display = 'none';
     }
   },
   fnAutoOnMouseOver: function (that, idx) {
     return function () {
       that.index = idx;
       that.fnChangeClass();
     }
   },
   fnChangeClass: function () {
     var that = this;
     var length = that.domDiv.children.length;
     for (var j = 0; j < length; j++) {
       if (j != that.index) {
         that.domDiv.childNodes[j].style.backgroundColor = '';
         that.domDiv.childNodes[j].style.color = '#000';
       } else {
         that.domDiv.childNodes[j].style.backgroundColor = 'blue';
         that.domDiv.childNodes[j].style.color = '#fff';
       }
     }
   },
   fnShowDiv: function () {
     if (this.domDiv.children.length !== 0) {
       this.domDiv.style.display = this.domDiv.style.display === 'none' ? 'block' : 'none';
     }
   },
   util: {//公共接口方法
     fnInsertAfter: function (ele, targetEle) {
       var parentnode = targetEle.parentNode || targetEle.parentElement;
       if (parentnode.lastChild == targetEle) {
         parentnode.appendChild(ele);
       } else {
         parentnode.insertBefore(ele, targetEle.nextSibling);
       }
     },
     fnAddEvent: 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;
       }
     },
     fnGet: function (url, fn, timeout) {
       var xhr = null;
       try {
         if (window.XMLHttpRequest) {
           xhr = new XMLHttpRequest();
         } 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);
         }
       };
       xhr.open('get', url, true);
       xhr.send();
     }
   }
 }

window.AutoComplete = function (option) {
   var aOption = Array.prototype.slice.call(arguments);
   for(var i=0;i<aOption.length;i++){
     var autoComplete = new AutoComplete();
     autoComplete.fnInit(aOption[i]);
     autoComplete.fnRender();
   }
 }

})(window);

index.html

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
</head>
<body>

<div>
<input type="text" id="txtTest">
</div>
<br>
<div>
<input type="text" id="txtTest1">
</div>

<script src="autoComplete.js"></script>
<script>

window.onload = function () {
   var option = {
     id: 'txtTest', //控件id
     data: [{
       "id": "1",
       "name": "aaaaa"
     }, {
       "id": "2",
       "name": "bbbbb"
     }, {
       "id": "2",
       "name": "bbb吴bb"
     }, {
       "id": "2",
       "name": "bbbzbb"
     }],
     paraName: 'name',
     textFiled: 'name', //显示的文字的属性名
     valueFiled: 'id', //获取value的属性名
     select: function (val, text) {
       alert(val + '' + text);
     } //选择选项时触发的事件
   };
   var option1 = {
     id: 'txtTest1', //控件id
     url: 'data.json', //数据
     paraName: 'name',
     textFiled: 'name', //显示的文字的属性名
     valueFiled: 'id', //获取value的属性名
     select: function (val, text) {
       alert(val + '' + text);
     } //选择选项时触发的事件
   };
   AutoComplete(option,option1);

}

</script>
</body>
</html>

data.json

[
{
 "id": "1",
 "name": "aaaaa"
},
{
 "id": "2",
 "name": "bbbbb"
},
{
 "id": "3",
 "name": "ccccc"
}
]