在实际的项目中，能用别人写好的插件实现相关功能是最好不过，为了节约时间成本，因为有的项目比较紧急，没充分时间让你自己来写，即便写了，你还要花大量时间调试兼容性。但是出于学习的目的，你可以利用闲暇时间，自己动手写写，看一些原生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 != "" "htmlcode">
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 != "" "htmlcode">
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);
}
现在基本的功能实现和调用讲完了，从开始到最后的过程是比较麻烦的，每个方法都是一步步实现，没有引用其他的库，要考虑到各个浏览器的兼容性。
以上就是本文的全部内容，希望对大家的学习有所帮助。
华山资源网 Design By www.eoogi.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
华山资源网 Design By www.eoogi.com
暂无评论...
一口气升级7个大模型SaaS应用，百度智能云：突出一个“开箱即用” - 2024/11/19
这一波大模型产业落地浪潮里，不少企业其实处在 “干瞪眼“的状态。
一种情况是，很多大模型产品看得见却摸不着，在台上一个个遥遥领先——今天Sora技精四座，明天英伟达的机器人又赢得满堂彩，可是到了台下一问：啥时候能用上啊？答曰：遥遥无期。
另一种情况是，企业想用上大模型，却又难免瞻前顾后——既要考虑场景融合，又得兼顾安全性，还要考虑打通现有系统，再加上各种部署成本和繁琐的采购流程……最后只能拂袖：罢了，再等等吧。
这一波大模型产业落地浪潮里，不少企业其实处在 “干瞪眼“的状态。
一种情况是，很多大模型产品看得见却摸不着，在台上一个个遥遥领先——今天Sora技精四座，明天英伟达的机器人又赢得满堂彩，可是到了台下一问：啥时候能用上啊？答曰：遥遥无期。
另一种情况是，企业想用上大模型，却又难免瞻前顾后——既要考虑场景融合，又得兼顾安全性，还要考虑打通现有系统，再加上各种部署成本和繁琐的采购流程……最后只能拂袖：罢了，再等等吧。
稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！
昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。
这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？
更新日志
2024年11月19日
2024年11月19日
- 冷漠.2011 《冷漠的爱DSD》[WAV+CUE][1.2G]
- 陈明《流金岁月精逊【中唱】【WAV+CUE】
- 群星《Jazz-Ladies1-2爵士女伶1-2》HQCD/2CD[原抓WAV+CUE]
- 群星《美女私房歌》（黑胶）[WAV分轨]
- 郑源.2009《试音天碟》24BIT-96KHZ[WAV+CUE][1.2G]
- 飞利浦试音碟 《环球群星监听录》SACD香港版[WAV+CUE][1.1G]
- 车载音乐最强享受《车载极致女声精选CD》[WAV分轨][1G]
- 童宇.2024-爱情万年历【TOUCH音乐】【FLAC分轨】
- 黄晓君.2010-丽风金典系列VOL.1.2CD【丽风】【WAV+CUE】
- 黄晓君.2011-丽风金典系列VOL.2【丽风】【WAV+CUE】
- 群星1992《天碟国语金曲精选》香港首版[WAV+CUE][1G]
- 萧敬腾《王妃》台湾首版[WAV分轨][1G]
- 陈奕迅2023《CHIN UP》EAS MUSIC[WAV+CUE][1.2G]
- 黄心懋《曾经有个女孩》滚石首版[WAV+CUE]
- 群星《车宴(紫银合金AQCD)》[原抓WAV+CUE]