بنفس الطريقة، لا يتطلب هذا البرنامج الإضافي أي علامات html، فهو يحتاج فقط إلى مربع إدخال باسم فئة مطابق ولا يلزم وجود اسم فئة آخر. يتم إنشاء كود HTML الداخلي تلقائيًا.
رمز HTML هو كما يلي:
انسخ رمز الكود كما يلي:
<ديف>
<نوع الإدخال = "نص">
</div>
في الواقع، علامات div المذكورة أعلاه ليست مطلوبة، ما عليك سوى إضافة فئة كما هو مذكور أعلاه في مربع إدخال الإدخال والعنصر الأصلي (يمكنك أيضًا تخصيصها، فقط قم بتمرير الفئة أثناء تهيئة JS. بشكل افتراضي، الفئة الأصلية). يسمىparentCls، وتسمى فئة مربع الإدخال الحالية inputElem، وتسمى فئة الحقل المخفية HiddenCls. يمكنك تهيئة كائن فارغ وتمريره مباشرة أثناء التهيئة!). نظرًا لاحتمال وجود عدة مربعات إدخال على الصفحة، هناك حاجة إلى فئة أصل لتمييز مربع الإدخال الموجود. بالطبع، يلزم وجود حقل مخفي لتخزين القيمة للواجهة الخلفية للتطوير.
توجد معلمة صفيف صندوق البريد mailArr في عنصر التكوين: ["@qq.com"،@qq2.com"،@gmail.com"،@126.com"،@163.com"،@". hotmail.com"،@yahoo.com"،@yahoo.com.cn"،@live.com"،@sohu.com"،@sina.com"]. إنه يخبرنا أن هناك العديد من صناديق البريد الافتراضية، بغض النظر عما أقوم بإدخاله، هناك الكثير من مطالبات صندوق البريد عند تهيئة المربع المنسدل. عندما أقوم بتحديد عنصر معين، سأعطيك مطالبة لتحديد عنصر معين العنصر في المربع المنسدل. بالطبع، نظرًا للتغيرات في الطلب، يمكن تكوين معلمة صندوق البريد هذه وفقًا للطلب أثناء التهيئة.
أسلوب الترميز لا يزال هو نفسه كما كان من قبل.
الوظائف المنفذة هي كما يلي:
1. يدعم حركة لوحة المفاتيح لأعلى ولأسفل، والنقر بالماوس وإدخال العملية.
2. عند النقر فوق المستند، يكون مربع القائمة المنسدلة مخفيًا باستثناء مربع الإدخال الحالي. سيتم تنفيذ المطابقة التلقائية والعمليات الأخرى عند الإدخال.
لن أخوض في التفاصيل، ولكنها تشبه وظيفة المطالبة التلقائية عبر البريد الإلكتروني عند التسجيل عبر الإنترنت. إذا كان لديك أي أخطاء، يمكنك ترك رسالة لي، لقد تأخر الوقت، لذا لا تتحدث كثيرًا. الصق الكود مباشرة:
رمز CSS هو كما يلي:
انسخ رمز الكود كما يلي:
<نمط>
*{الهامش:0;الحشو:0;}
أول، لي {نمط القائمة: لا شيء؛}
.inputElem {width:198px;height:22px;line-height:22px;border:1px Solid #ff4455;}
.parentCls {العرض: 200px؛}
.Auto-tip li{width:100%;height:22px;line-height:22px;font-size:14px;}
.auto-tip li.hoverBg{background:#ddd;cursor:pointer;}
.أحمر {اللون: أحمر؛}
.مخفي {عرض: لا شيء؛}
</نمط>
رمز JS هو كما يلي:
انسخ رمز الكود كما يلي:
/**
* إرسال بريد إلكتروني تلقائي للمكون الإضافي
* @constructor EmailAutoComplete
* @ خيارات {كائن} عناصر قابلة للتكوين
*/
وظيفة الإكمال التلقائي للبريد الإلكتروني (خيارات) {
هذا.التكوين = {
targetCls: '.inputElem'، // عنصر الإدخال الهدف
parentCls: '.parentCls', // الفئة الأصلية لعنصر الإدخال الحالي
HiddenCls: '.hiddenCls'، // الحقل المخفي للإدخال الحالي
نموذج البحث: '.jqtransformdone'، // نموذج النموذج
hoverBg: 'hoverBg', // الخلفية التي يتحرك بها الماوس لأعلى
inputValColor: 'red'، // لون المطالبة بإدخال مربع الإدخال
mailArr: ["@qq.com"،@qq2.com"،@gmail.com"،@126.com"،@163.com"،@hotmail.com"،@yahoo.com ""،@yahoo.com.cn"،@live.com"،@sohu.com"،@sina.com"], // مصفوفة البريد الإلكتروني
isSelectHide: true، // ما إذا كان سيتم إخفاء مربع القائمة المنسدلة عند النقر فوقه، فهذا صحيح بشكل افتراضي.
رد الاتصال: فارغ // انقر فوق وظيفة رد الاتصال للعنصر
};
ذاكرة التخزين المؤقت هذه = {
OnlyFlag: صحيح، // يُعرض مرة واحدة فقط
الفهرس الحالي: -1،
الفهرس القديم: -1
};
this.init(options);
}
EmailAutoComplete.prototype = {
المنشئ: الإكمال التلقائي للبريد الإلكتروني،
الحرف الأول: وظيفة (خيارات) {
this.config = $.extend(this.config,options || {});
فار النفس = هذا،
_config = self.config،
_cache = self.cache;
$(_config.targetCls).each(function(index,item){
$(العنصر).مفتاح(وظيفة(ه){
فار الهدف = e.target،
targetVal = $.trim($(this).val())،
رمز المفتاح = e.keyCode،
elemHeight = $(this).outerHeight(),
elemWidth = $(this).outerWidth(),
parentNode = $(this).Closest(_config.parentCls);
$(parentNode).css({'position':'relative'});
// إذا كانت قيمة مربع الإدخال فارغة، فسيتم إخفاء مربع القائمة المنسدلة
إذا (targetVal == '') {
$(item).attr({'data-html':''});
// قم بتعيين قيمة للحقل المخفي
$(_config.hiddenCls,parentNode).val('');
_cache.currentIndex = -1;
_cache.oldIndex = -1;
$(".auto-tip"،parentNode) && !$(".auto-tip"،parentNode).hasClass('hidden') && $(".auto-tip"،parentNode).addClass('hidden') ;
self._removeBg(parentNode);
}آخر {
$(item).attr({'data-html':targetVal});
// قم بتعيين قيمة للحقل المخفي
$(_config.hiddenCls,parentNode).val(targetVal);
$(".auto-tip"،parentNode) && $(".auto-tip"،parentNode).hasClass('hidden') && $(".auto-tip"،parentNode).removeClass('hidden');
// اعرض محتوى المربع المنسدل
self._renderHTML({keycode:keycode,e:e,target:target,targetVal:targetVal,height:elemHeight,width:elemWidth,parentNode:parentNode});
}
});
});
// منع إرسال نموذج النموذج بشكل افتراضي مفتاح الإدخال
$(_config.searchForm).each(function(index,item) {
$(العنصر).keydown(وظيفة(ه){
var keyCode = e.keyCode;
إذا (رمز المفتاح == 13) {
عودة كاذبة.
}
});
});
// يتم إخفاء المربع المنسدل عند النقر فوق المستند.
$(مستند).انقر(وظيفة(ه){
e.stopPropagation();
فار الهدف = e.target،
tagCls = _config.targetCls.replace(/^/./,'');
إذا(!$(الهدف).hasClass(tagCls)) {
$('.auto-tip') && $('.auto-tip').each(function(index,item){
!$(item).hasClass('hidden') && $(item).addClass('hidden');
});
}
});
},
/*
* تقديم المحتوى الفوري للمربع المنسدل
* @param cfg {كائن}
*/
_renderHTML: الوظيفة(cfg) {
فار النفس = هذا،
_config = self.config،
_cache = self.cache،
curVal;
var curIndex = self._keyCode(cfg.keycode);
$('.auto-tip',cfg.parentNode).hasClass('hidden') && $('.auto-tip',cfg.parentNode).removeClass('hidden');
إذا(curIndex > -1){
// عمليات لوحة المفاتيح لأعلى ولأسفل
self._keyUpAndDown(cfg.targetVal,cfg.e,cfg.parentNode);
}آخر {
إذا(/@/.test(cfg.targetVal)) {
curVal = cfg.targetVal.replace(/@.*/,'');
}آخر {
curVal = cfg.targetVal;
}
إذا (_cache.onlyFlag) {
$(cfg.parentNode).append('<input type="hidden"/>');
var Wrap = '<ul>';
for(var i = 0; i < _config.mailArr.length; i++) {
التفاف += '<li>'+'<span></span><em data-html="'+_config.mailArr[i]+'">'+_config.mailArr[i]+'</em> </li>';
}
التفاف += '</ul>';
_cache.onlyFlag = false;
$(cfg.parentNode).append(wrap);
$('.auto-tip',cfg.parentNode).css({'position':'absolute','top':cfg.height,'width':cfg.width - 2 + 'px','left' :0،
'border':'1px Solid #ccc','z-index':10000});
}
// أضف سمة data-html إلى الكل li
$('.auto-tip li',cfg.parentNode).each(function(index,item){
$('.output-num',item).html(curVal);
!$('.output-num',item).hasClass(_config.inputValColor) &&
$('.output-num',item).addClass(_config.inputValColor);
var emVal = $.trim($('.em',item).attr('data-html'));
$(item).attr({'data-html':curVal + '' +emVal});
});
// تطابق المحتوى تمامًا
self._accurateMate({target:cfg.target,parentNode:cfg.parentNode});
// عندما يتحرك الماوس فوق عنصر ما li
self._itemHover(cfg.parentNode);
// عند النقر فوق العنصر المقابل
self._executeClick(cfg.parentNode);
}
},
/**
* تطابق تماما شيئا
*/
_accurateMate: الوظيفة(cfg) {
فار النفس = هذا،
_config = self.config،
_cache = self.cache;
فار curVal = $.trim($(cfg.target,cfg.parentNode).attr('data-html'))،
newArrs = [];
إذا(/@/.test(curVal)) {
// احصل على القيمة قبل وبعد @
بادئة فار = curVal.replace(/@.*/, ""),
suffix = curVal.replace(/.*@/, "");
$.map(_config.mailArr,function(n){
var reg = new RegExp(suffix);
إذا (reg.test (ن)) {
newArrs.push(n);
}
});
إذا (newArrs.length > 0) {
$('.auto-tip',cfg.parentNode).html('');
$(".auto-tip"،cfg.parentNode) && $(".auto-tip"،cfg.parentNode).hasClass('hidden') &&
$(".auto-tip"،cfg.parentNode).removeClass('hidden');
فار html = '';
for(var j = 0, jlen = newArrs.length; j < jlen; j++) {
html += '<li>'+'<span></span><em data-html="'+newArrs[j]+'">'+newArrs[j]+'</em></li> ';
}
$('.auto-tip',cfg.parentNode).html(html);
// أضف سمة data-html إلى الكل li
$('.auto-tip li',cfg.parentNode).each(function(index,item){
$('.output-num',item).html(prefix);
!$('.output-num',item).hasClass(_config.inputValColor) &&
$('.output-num',item).addClass(_config.inputValColor);
var emVal = $.trim($('.em',item).attr('data-html'));
$(item).attr('data-html','');
$(item).attr({'data-html':prefix + '' +emVal});
});
// عند مطابقة عنصر ما بدقة، اجعل الفهرس الحالي مساويًا للقيمة الأولية
_cache.currentIndex = -1;
_cache.oldIndex = -1;
$('.auto-tip .output-num',cfg.parentNode).html(prefix);
// عندما يتحرك الماوس فوق عنصر ما li
self._itemHover(cfg.parentNode);
// عند النقر فوق العنصر المقابل
self._executeClick(cfg.parentNode);
}آخر {
$(".auto-tip"،cfg.parentNode) && !$(".auto-tip"،cfg.parentNode).hasClass('hidden') &&
$(".auto-tip"،cfg.parentNode).addClass('hidden');
$('.auto-tip',cfg.parentNode).html('');
}
}
},
/*
* عندما يتحرك الماوس فوق عنصر ما
*/
_itemHover: الوظيفة(parentNode) {
فار النفس = هذا،
_config = self.config،
_cache = self.cache;
$('.auto-tip li',parentNode).hover(function(index,item) {
!$(this).hasClass(_config.hoverBg) && $(this).addClass(_config.hoverBg);
}،وظيفة() {
$(this).hasClass(_config.hoverBg) && $(this).removeClass(_config.hoverBg);
});
},
/*
* عندما تكون قيمة مربع الإدخال فارغة، يتم حذف جميع عناصر li باستخدام الفئة hoverBg
*/
_removeBg: وظيفة(parentNode){
فار النفس = هذا،
_config = self.config;
$(".auto-tip li"،parentNode).each(function(index,item){
$(item).hasClass(_config.hoverBg) && $(item).removeClass(_config.hoverBg);
});
},
/**
* لوحة المفاتيح لأعلى ولأسفل العمليات الرئيسية
*/
_keyUpAndDown: الوظيفة(targetVal,e,parentNode) {
فار النفس = هذا،
_cache = self.cache،
_config = self.config;
// إذا تم إرجاع البيانات بعد نجاح الطلب (يتم الحكم عليه بناءً على طول العنصر)، فقم بتنفيذ العمليات التالية
if($('.auto-tip' + 'li',parentNode) && $('.auto-tip' + 'li').length > 0) {
var plen = $('.auto-tip' + 'li',parentNode).length,
keyCode = e.keyCode;
_cache.oldIndex = _cache.currentIndex;
// تحريك العملية لأعلى
إذا (رمز المفتاح == 38) {
إذا (_cache.currentIndex == -1) {
_cache.currentIndex = plen - 1;
}آخر {
_cache.currentIndex = _cache.currentIndex - 1;
إذا (_cache.currentIndex <0) {
_cache.currentIndex = plen - 1;
}
}
إذا (_cache.currentIndex!== -1) {
!$('.auto-tip .p-index'+_cache.currentIndex,parentNode).hasClass(_config.hoverBg) &&
$('.auto-tip .p-index'+_cache.currentIndex,parentNode).addClass(_config.hoverBg).siblings().removeClass(_config.hoverBg);
var curAttr = $('.auto-tip' + ' .p-index'+_cache.currentIndex,parentNode).attr('data-html');
$(_config.targetCls,parentNode).val(curAttr);
// قم بتعيين قيمة للحقل المخفي
$(_config.hiddenCls,parentNode).val(curAttr);
}
}else if(keyCode == 40) { // عملية النقل لأسفل
إذا (_cache.currentIndex == بلين - 1) {
_cache.currentIndex = 0;
}آخر {
_cache.currentIndex++;
إذا (_cache.currentIndex > plen - 1) {
_cache.currentIndex = 0;
}
}
إذا (_cache.currentIndex!== -1) {
!$('.auto-tip .p-index'+_cache.currentIndex,parentNode).hasClass(_config.hoverBg) &&
$('.auto-tip .p-index'+_cache.currentIndex,parentNode).addClass(_config.hoverBg).siblings().removeClass(_config.hoverBg);
var curAttr = $('.auto-tip' + ' .p-index'+_cache.currentIndex,parentNode).attr('data-html');
$(_config.targetCls,parentNode).val(curAttr);
// قم بتعيين قيمة للحقل المخفي
$(_config.hiddenCls,parentNode).val(curAttr);
}
}else if(keyCode == 13) { //أدخل العملية
var curVal = $('.auto-tip' + ' .p-index'+_cache.oldIndex,parentNode).attr('data-html');
$(_config.targetCls,parentNode).val(curVal);
// قم بتعيين قيمة للحقل المخفي
$(_config.hiddenCls,parentNode).val(curVal);
إذا (_config.isSelectHide) {
!$(".auto-tip"،parentNode).hasClass('hidden') && $(".auto-tip"،parentNode).addClass('hidden');
}
_config.callback && $.isFunction(_config.callback) && _config.callback();
_cache.currentIndex = -1;
_cache.oldIndex = -1;
}
}
},
_keyCode: الوظيفة (الكود) {
فار آرس = ['17','18','38','40','37','39','33','34','35','46','36','13 ','45','44','145','19','20','9'];
for(var i = 0, ilen = arrs.length; i < ilen; i++) {
إذا (كود == arrs[i]) {
العودة أنا؛
}
}
العودة -1؛
},
/**
* عندما تكون البيانات هي نفسها، يتم إرجاع البيانات عند النقر فوق العنصر المقابل
*/
_executeClick: الوظيفة(parentNode) {
var _self = هذا،
_config = _self.config;
$('.auto-tip' + ' li',parentNode).unbind('click');
$('.auto-tip' + ' li',parentNode).bind('click',function(e){
var dataAttr = $(this).attr('data-html');
$(_config.targetCls,parentNode).val(dataAttr);
إذا (_config.isSelectHide) {
!$(".auto-tip"،parentNode).hasClass('hidden') && $(".auto-tip"،parentNode).addClass('hidden');
}
// قم بتعيين قيمة للحقل المخفي
$(_config.hiddenCls,parentNode).val(dataAttr);
_config.callback && $.isFunction(_config.callback) && _config.callback();
});
}
};
// التهيئة
$(وظيفة() {
الإكمال التلقائي للبريد الإلكتروني الجديد({});
});