ในทำนองเดียวกัน ปลั๊กอินนี้ไม่จำเป็นต้องมีแท็ก html ใดๆ เพียงต้องการกล่องอินพุตที่มีชื่อคลาสที่เกี่ยวข้องและพาเรนต์มีชื่อคลาสอื่นอีก รหัส HTML ภายในจะถูกสร้างขึ้นโดยอัตโนมัติ
รหัส HTML มีลักษณะดังนี้:
คัดลอกรหัสรหัสดังต่อไปนี้:
<div>
<ประเภทอินพุต = "ข้อความ">
</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;}
ul, li {รายการสไตล์: ไม่มี;}
.inputElem {ความกว้าง:198px;ความสูง:22px;line-height:22px;border:1px solid #ff4455;}
.parentCls{ความกว้าง:200px;}
.เคล็ดลับอัตโนมัติ li{width:100%;height:22px;line-height:22px;font-size:14px;}
. เคล็ดลับอัตโนมัติ li.hoverBg {พื้นหลัง: #ddd; เคอร์เซอร์: ตัวชี้;}
.red{สี:แดง;}
.hidden {แสดง:ไม่มี;}
</สไตล์>
รหัส JS เป็นดังนี้:
คัดลอกรหัสรหัสดังต่อไปนี้:
-
* ส่งอีเมลปลั๊กอินแจ้งอัตโนมัติ
* @constructor อีเมลทำให้สมบูรณ์อัตโนมัติ
* @ ตัวเลือก {object} รายการที่กำหนดค่าได้
-
ฟังก์ชั่น EmailAutoComplete (ตัวเลือก) {
นี้.config = {
targetCls: '.inputElem', // องค์ประกอบอินพุตเป้าหมาย
parentCls: '.parentCls', //คลาสหลักขององค์ประกอบอินพุตปัจจุบัน
HiddenCls: '.hiddenCls', // ฟิลด์อินพุตปัจจุบันที่ซ่อนอยู่
searchForm: '.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: จริง // ไม่ว่าจะซ่อนกล่องแบบเลื่อนลงเมื่อคลิกหรือไม่ เป็นจริงตามค่าเริ่มต้น
โทรกลับ: null // คลิกฟังก์ชันโทรกลับรายการ
-
นี้.แคช = {
onlyFlag : true, // เรนเดอร์เพียงครั้งเดียวเท่านั้น
ดัชนีปัจจุบัน : -1,
ดัชนีเก่า : -1
-
this.init (ตัวเลือก);
-
EmailAutoComplete.prototype = {
ตัวสร้าง: EmailAutoComplete,
init: ฟังก์ชั่น (ตัวเลือก) {
this.config = $.extend(this.config,ตัวเลือก || {});
var self = นี่
_config = ตนเอง.config,
_cache = ตนเอง.แคช;
$(_config.targetCls).each(function(index,item){
$(รายการ).keyup(ฟังก์ชั่น(e){
เป้าหมาย var = e.target
targetVal = $.trim($(this).val()),
รหัสคีย์ = e.keyCode
elemHeight = $(นี้).outerHeight(),
elemWidth = $(นี้).outerWidth(),
parentNode = $(นี้).closest(_config.parentCls);
$(parentNode).css({'position':'relative'});
//หากค่าของช่องอินพุตว่างเปล่า ระบบจะซ่อนกล่องแบบเลื่อนลง
ถ้า (targetVal == '') {
$(รายการ).attr({'data-html':''});
//กำหนดค่าให้กับฟิลด์ที่ซ่อนอยู่
$(_config.hiddenCls,parentNode).val('');
_แคช.currentIndex = -1;
_แคช.oldIndex = -1;
$(".auto-tip",parentNode) && !$(".auto-tip",parentNode).hasClass('hidden') && $(".auto-tip",parentNode).addClass('hidden') ;
self._removeBg (โหนดหลัก);
}อื่น {
$(รายการ).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(ฟังก์ชั่น(ดัชนี,รายการ) {
$(รายการ).keydown(ฟังก์ชั่น(e){
var keyCode = e.keyCode;
ถ้า (รหัสคีย์ == 13) {
กลับเท็จ;
-
-
-
// กล่องแบบเลื่อนลงจะถูกซ่อนไว้เมื่อมีการคลิกเอกสาร
$(เอกสาร).คลิก(ฟังก์ชั่น(e){
e.stopPropagation();
เป้าหมาย var = e.target
tagCls = _config.targetCls.replace(/^/./,'');
ถ้า(!$(เป้าหมาย).hasClass(tagCls)) {
$('.auto-tip') && $('.auto-tip').each(function(index,item){
!$(รายการ).hasClass('ซ่อน') && $(รายการ).addClass('ซ่อน');
-
-
-
-
-
* แสดงเนื้อหาพร้อมท์กล่องแบบเลื่อนลง
* @param cfg {วัตถุ}
-
_renderHTML: ฟังก์ชั่น (cfg) {
var self = นี่
_config = ตนเอง.config,
_cache = แคชของตัวเอง
เคอร์วัล;
var curIndex = self._keyCode(cfg.keycode);
$('.เคล็ดลับอัตโนมัติ',cfg.parentNode).hasClass('ซ่อน') && $('.เคล็ดลับอัตโนมัติ',cfg.parentNode).removeClass('ซ่อน');
ถ้า(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>';
สำหรับ (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 = เท็จ;
$(cfg.parentNode).ผนวก(ห่อ);
$('.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',รายการ).hasClass(_config.inputValColor) &&
$('.output-num',item).addClass(_config.inputValColor);
var emVal = $.trim($('.em',item).attr('data-html'));
$(รายการ).attr({'data-html':curVal + '' +emVal});
-
//ตรงกับเนื้อหาทุกประการ
self._accurateMate({target:cfg.target,parentNode:cfg.parentNode});
//เมื่อเมาส์เลื่อนไปที่รายการ li
self._itemHover(cfg.parentNode);
//เมื่อคลิกรายการที่เกี่ยวข้อง
self._executeClick(cfg.parentNode);
-
-
-
* ตรงกับบางสิ่งบางอย่างทุกประการ
-
_accurateMate: ฟังก์ชั่น (cfg) {
var self = นี่
_config = ตนเอง.config,
_cache = ตนเอง.แคช;
var curVal = $.trim($(cfg.target,cfg.parentNode).attr('data-html'))
ใหม่Arrs = [];
ถ้า(/@/.test(curVal)) {
// รับค่าก่อนและหลัง @
คำนำหน้า var = curVal.replace(/@.*/, ""),
คำต่อท้าย = curVal.replace(/.*@/, "");
$.map(_config.mailArr,ฟังก์ชัน(n){
var reg = RegExp ใหม่ (คำต่อท้าย);
ถ้า (reg.test (n)) {
newArrs.push(n);
-
-
ถ้า (newArrs.length > 0) {
$('.คำแนะนำอัตโนมัติ',cfg.parentNode).html('');
$(".เคล็ดลับอัตโนมัติ",cfg.parentNode) && $(".คำแนะนำอัตโนมัติ",cfg.parentNode).hasClass('ซ่อน') &&
$(".auto-tip",cfg.parentNode).removeClass('hidden');
var html = '';
สำหรับ (var j = 0, jlen = newArrs.length; j < jlen; j ++) {
html += '<li>'+'<span></span><em data-html="'+newArrs[j]+'">'+newArrs[j]+'</em></li> ';
-
$('.เคล็ดลับอัตโนมัติ',cfg.parentNode).html(html);
//เพิ่มแอตทริบิวต์ data-html ให้กับ li ทั้งหมด
$('.auto-tip li',cfg.parentNode).each(function(index,item){
$('.output-num',item).html(คำนำหน้า);
!$('.output-num',รายการ).hasClass(_config.inputValColor) &&
$('.output-num',item).addClass(_config.inputValColor);
var emVal = $.trim($('.em',item).attr('data-html'));
$(รายการ).attr('data-html','');
$(item).attr({'data-html':prefix + '' +emVal});
-
// เมื่อรายการถูกจับคู่อย่างถูกต้อง ให้สร้างดัชนีปัจจุบันเท่ากับค่าเริ่มต้น
_แคช.currentIndex = -1;
_แคช.oldIndex = -1;
$('.auto-tip .output-num',cfg.parentNode).html(คำนำหน้า);
//เมื่อเมาส์เลื่อนไปที่รายการ li
self._itemHover(cfg.parentNode);
//เมื่อคลิกรายการที่เกี่ยวข้อง
self._executeClick(cfg.parentNode);
}อื่น {
$(".เคล็ดลับอัตโนมัติ",cfg.parentNode) && !$(".เคล็ดลับอัตโนมัติ",cfg.parentNode).hasClass('ซ่อน') &&
$(".auto-tip",cfg.parentNode).addClass('hidden');
$('.คำแนะนำอัตโนมัติ',cfg.parentNode).html('');
-
-
-
-
* เมื่อเมาส์เลื่อนไปเหนือรายการ li
-
_itemHover: ฟังก์ชั่น (โหนดหลัก) {
var self = นี่
_config = ตนเอง.config,
_cache = ตนเอง.แคช;
$('.auto-tip li', parentNode).hover(function(index,item) {
!$(นี้).hasClass(_config.hoverBg) && $(นี้).addClass(_config.hoverBg);
},การทำงาน() {
$(นี้).hasClass(_config.hoverBg) && $(นี้).removeClass(_config.hoverBg);
-
-
-
* เมื่อค่ากล่องอินพุตว่างเปล่า รายการ li ทั้งหมดจะถูกลบด้วยคลาส hoverBg
-
_removeBg: ฟังก์ชั่น (โหนดหลัก) {
var self = นี่
_config = ตนเอง.config;
$(".auto-tip li",parentNode).each(function(index,item){
$(รายการ).hasClass(_config.hoverBg) && $(รายการ).removeClass(_config.hoverBg);
-
-
-
* การทำงานของคีย์บอร์ดขึ้นและลง
-
_keyUpAndDown: ฟังก์ชั่น (targetVal, e, parentNode) {
var self = นี่
_cache = แคชของตัวเอง
_config = ตนเอง.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 = เต็ม - 1;
}อื่น {
_cache.currentIndex = _cache.currentIndex - 1;
ถ้า(_cache.currentIndex < 0) {
_cache.currentIndex = เต็ม - 1;
-
-
ถ้า(_cache.currentIndex !== -1) {
!$('.คำแนะนำอัตโนมัติ .p-index'+_cache.currentIndex,parentNode).hasClass(_config.hoverBg) &&
$('.เคล็ดลับอัตโนมัติ .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) {
_แคช.currentIndex = 0;
}อื่น {
_cache.currentIndex++;
ถ้า (_cache.currentIndex > plen - 1) {
_แคช.currentIndex = 0;
-
-
ถ้า(_cache.currentIndex !== -1) {
!$('.คำแนะนำอัตโนมัติ .p-index'+_cache.currentIndex,parentNode).hasClass(_config.hoverBg) &&
$('.เคล็ดลับอัตโนมัติ .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();
_แคช.currentIndex = -1;
_cache.oldIndex = -1;
-
-
-
_keyCode: ฟังก์ชั่น (รหัส) {
var arrs = ['17','18','38','40','37','39','33','34','35','46','36','13 ','45','44','145','19','20','9'];
สำหรับ (var i = 0, ilen = arrs.length; i < ilen; i++) {
ถ้า (รหัส == arrs [i]) {
ส่งคืนฉัน;
-
-
กลับ -1;
-
-
* เมื่อข้อมูลเหมือนกัน ข้อมูลจะถูกส่งกลับเมื่อมีการคลิกรายการที่เกี่ยวข้อง
-
_executeClick: ฟังก์ชั่น (parentNode) {
var _self = นี่
_config = _self.config;
$('.auto-tip' + ' li',parentNode).unbind('คลิก');
$('.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();
-
-
-
// การเริ่มต้น
$(ฟังก์ชั่น() {
ใหม่ EmailAutoComplete({});
-