在实际的项目中，能用别人写好的插件实现相关功能是最好不过，为了节约时间成本，因为有的项目比较紧急，没充分时间让你自己来写，即便写了，你还要花大量时间调试兼容性。但是出于学习的目的，你可以利用闲暇时间，自己动手写写，看一些原生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' };
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 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 p.name.contains(name)).tolist(); } return json(list,jsonrequestbehavior.allowget);}
现在基本的功能实现和调用讲完了，从开始到最后的过程是比较麻烦的，每个方法都是一步步实现，没有引用其他的库，要考虑到各个浏览器的兼容性。
以上就是本文的全部内容，希望对大家的学习有所帮助。