在实际的项目中，能用别人写好的插件实现相关功能是最好不过，为了节约时间成本，因为有的项目比较紧急，没充分时间让你自己来写，即便写了，你还要花大量时间调试兼容性。但是出于学习的目的，你可以利用闲暇时间，自己动手写写，看一些原生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; }
追加选项代码：
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: '', //控件id data: [], //数据 textFiled: '', //显示的文字的属性名 valueFiled: '', //获取value的属性名 style: {}, //显示的下拉div的样式设置 url: '', //ajax请求的url paraName:'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 exception alert(e); } }); } } }, ////创建下拉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' }; 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 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(); } } } win.AutoComplete = function (paraobj) { new autocomplete(paraobj).Render(); } })(window)
下面是使用的代码
页面调用
window.onload = function () { AutoComplete({ id: 'txtTest', //控件id url: '/Home/Test4', //数据 paraName:'name', textFiled: 'name', //显示的文字的属性名 valueFiled: 'id', //获取value的属性名 // style: {}, //显示的下拉div的样式设置 // url: '', //ajax请求的url select: function (val, text) { alert(val + '---' + text); }, //选择选项时触发的事件, showdivId: 'showDIv' //下拉选择区域的id}); }); }
后台代码如下，这里我用的是mvc
public JsonResult Test4(string name) { 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); }
现在基本的功能实现和调用讲完了，从开始到最后的过程是比较麻烦的，每个方法都是一步步实现，没有引用其他的库，要考虑到各个浏览器的兼容性。
以上就是本文的全部内容，希望对大家的学习有所帮助。
【原生js实现autocomplete插件】相关文章：