原生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,chromif （window.XMLHttpRequest） {xhr = new XMLHttpRequest（）;}//////兼容IEelse if （Window.ActiveXObject） { xhr = new ActiveXObject（"Msxml2.Xmlhttp"）;}} catch （e） {//TODO handle the exceptionxhr = 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）;}//创建下拉Divvar 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;}

追加选项代码：

appendChild: function（data） {var self = this;var data = data;var fragment = document.createDocumentFragment（）;for （var i = 0; i < data.length; i++） {var obj = data[i];var child = document.createElement（"div"）;child.style.width = self.showdiv.style.width;child.style.border = "1px";child.style.borderStyle = "solid";child.style.borderTopColor = "white";child.setAttribute（"key", obj[self.config.valueFiled]）;child.innerHTML = obj[self.config.textFiled];fragment.appendChild（child）;}self.showdiv.appendChild（fragment）;self.util.insertAfter（self.showdiv, self.autoElement）; //为下拉框添加点击事件self.util.AddEvt（self.showdiv, "click", function（e） {var evt = e || window.event;var target = evt.srcElement || evt.target;var key = target.getAttribute（"key"）;var val = target.innerHTML;self.autoElement.value = val;self.closeDiv（）;self.config.select.call（self, key, val）;}）;}

上面说的是主要的几步思路，现在看一下怎么将这些代码封装到一个对象中，让它成为插件。这时候我们用到匿名闭包：

（function（win） {var autocomplete= function（） {this.Init.apply（this, arguments）; } autocomplete.prototype = { ////添加相关操作代码 Init: {}, ///初始化参数 Render: {}, createShowDiv： {}, ///创建下拉div appendChild: {}, ///在下拉div里面追加显示项 closeDiv: {}, ////关闭下拉框 //////工具对象，事件，请求，还有dom节点操作的函数 util: { AddEvt： {}, ///添加事件 insertAfter: {}, ///在某元素后面追加元素 get: {} //// Ajax get请求 } } win.Autocomplete= function（paraobj） {new autocomplete（paraobj）.Render（）;}}）（window）

主体的代码添加好了，我们把具体的实现代码展示出来：

（function（win） {var autocomplete = function （） {this.Init.apply（this, arguments）;}autocomplete.prototype = {Init: function（） {var args = Array.prototype.slice.call（arguments）;if （args && args.length > 0） {var config = args[0];var getType = Object.prototype.toString;if （config && getType.call（config） == "[object Object]"） {// this.config = config;this.config = config || {id: "", //控件iddata: [], //数据textFiled: "", //显示的文字的属性名valueFiled: "", //获取value的属性名style: {}, //显示的下拉div的样式设置url: "", //ajax请求的urlparaName:"name",//ajax请求的参数select: function（） {}, //选择选项时触发的事件,showdivId: "" //下拉选择区域的id};}}},Render: function（） {var self = this;if （self.config） {var autoElement = document.getElementById（self.config.id）;this.autoElement = autoElement;if （autoElement） {self.util.AddEvt（this.autoElement, "input", function（） {try {if （autoElement.value） {////ajax请求获取数据的方式if （self.config.url && ！self.config.data） {var paraobj = {};paraobj[self.config.paraName] = autoElement.value;self.util.get（self.config.url, paraobj, function （data） {self.createShowDiv（）;self.appendChild（eval（"（" + data + "）"））;}, 10000）;}////直接设置对象数组的形式else if（！self.config.url && self.config.data） {self.createShowDiv（）;self.appendChild（self.config.data）;} } else {self.closeDiv（）;} } catch （e） {//TODO handle the exceptionalert（e）;}}）;} }},////创建下拉DivcreateShowDiv: 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）;}//创建下拉Divvar 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"};for （var prop in style） {div.style[prop] = style[prop];}this.showdiv = div;},///在下拉div里面追加显示项appendChild: function（data） {var self = this;var data = data;var fragment = document.createDocumentFragment（）;for （var i = 0; i < data.length; i++） {var obj = data[i];var child = document.createElement（"div"）;child.style.width = self.showdiv.style.width;child.style.border = "1px";child.style.borderStyle = "solid";child.style.borderTopColor = "white";child.setAttribute（"key", obj[self.config.valueFiled]）;child.innerHTML = obj[self.config.textFiled];fragment.appendChild（child）;}self.showdiv.appendChild（fragment）;self.util.insertAfter（self.showdiv, self.autoElement）; //为下拉框添加点击事件self.util.AddEvt（self.showdiv, "click", function（e） {var evt = e || window.event;var target = evt.srcElement || evt.target;var key = target.getAttribute（"key"）;var val = target.innerHTML;self.autoElement.value = val;self.closeDiv（）;self.config.select.call（self, key, val）;}）;},////关闭下拉框closeDiv: function （） {if （this.showdiv） {this.showdiv.style.display = "none";} },util: {///添加事件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;}},///在某元素后面追加元素insertAfter: function（ele, targetELe） {var parentnode = targetELe.parentNode || targetELe.parentElement;if （parentnode.lastChild == targetELe） {parentnode.appendChild（ele）;} else {parentnode.insertBefore（ele, targetELe.nextSibling）;}},///Get请求get: function（url, paraobj, 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 exceptionxhr = 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（）; }}} win.AutoComplete = function （paraobj） {new autocomplete（paraobj）.Render（）; } }）（window）

下面是使用的代码

页面调用

window.onload = function （） {AutoComplete（{id: "txtTest", //控件idurl: "/Home/Test4", //数据paraName:"name",textFiled: "name", //显示的文字的属性名valueFiled: "id", //获取value的属性名// style: {}, //显示的下拉div的样式设置// url: "", //ajax请求的urlselect: function （val, text） {alert（val + "---" + text）;}, //选择选项时触发的事件,showdivId: "showDIv" //下拉选择区域的id}）;}）; }

后台代码如下，这里我用的是mvc

public JsonResult Test4（stringname）{var list=new List<Student>（）;list.Add（new Student { id="1",name="aaaaa"}）;list.Add（new Student { id = "2", name = "aacc" }）; list.Add（new Student { id = "3", name = "aabb" }）;list.Add（new Student { id = "4", name = "bbcc" }）; if （！string.IsNullOrEmpty（name））{list = list.Where（p => p.name.Contains（name））.ToList（）;}return Json（list,JsonRequestBehavior.AllowGet）;}

现在基本的功能实现和调用讲完了，从开始到最后的过程是比较麻烦的，每个方法都是一步步实现，没有引用其他的库，要考虑到各个浏览器的兼容性。
以上就是本文的全部内容，希望对大家的学习有所帮助。