Dengan cara yang sama, plugin ini tidak memerlukan tag html apa pun, hanya memerlukan kotak input dengan nama kelas yang sesuai dan induknya memiliki nama kelas. Kode HTML internal dibuat secara otomatis.
Kode HTMLnya adalah sebagai berikut:
Copy kode kodenya sebagai berikut:
<div>
<tipe masukan="teks">
</div>
Sebenarnya tag div di atas tidak diperlukan. Anda hanya perlu menambahkan kelas seperti di atas pada kotak input input dan elemen induk (Anda juga dapat menyesuaikannya, cukup teruskan kelas tersebut selama inisialisasi JS. Secara default, kelas induk disebut parentCls, kelas kotak masukan saat ini disebut inputElem, dan kelas bidang tersembunyi disebut HiddenCls. Anda dapat langsung menginisialisasi dan meneruskan objek kosong selama inisialisasi!). Karena mungkin terdapat beberapa kotak masukan pada halaman, kelas induk diperlukan untuk membedakan kotak masukan mana yang dimaksud. Tentu saja, bidang tersembunyi diperlukan untuk menyimpan nilai untuk backend pengembangan.
Ada parameter array kotak surat mailArr di item konfigurasi: ["@qq.com","@qq2.com","@gmail.com","@126.com","@163.com","@ hotmail.com","@yahoo.com","@yahoo.com.cn","@live.com","@sohu.com","@sina.com"]. Ini untuk memberi tahu kita bahwa ada begitu banyak kotak surat default. Tidak peduli apa yang saya masukkan, ada begitu banyak perintah kotak surat ketika kotak drop-down diinisialisasi. Ketika saya menentukan item tertentu, saya akan memberikan prompt untuk menentukan item tertentu item di kotak drop-down. Tentu saja, karena perubahan permintaan, parameter kotak surat ini dapat dikonfigurasi sesuai permintaan selama inisialisasi.
Gaya pengkodeannya masih sama seperti sebelumnya.
Fungsi yang diterapkan adalah sebagai berikut:
1. Mendukung gerakan keyboard ke atas dan ke bawah, klik mouse dan operasi enter.
2. Saat mengklik dokumen, kotak drop-down disembunyikan kecuali kotak masukan saat ini. Pencocokan otomatis dan operasi lainnya akan diterapkan saat memasukkan.
Saya tidak akan menjelaskan secara detail, tetapi ini mirip dengan fungsi prompt email otomatis saat mendaftar online. Jika Anda memiliki bug, Anda dapat meninggalkan pesan kepada saya. Ini sudah larut, jadi jangan bertele-tele! Tempelkan kode secara langsung:
Kode CSSnya seperti berikut:
Copy kode kodenya sebagai berikut:
<gaya>
*{margin:0;padding:0;}
ul,li{gaya daftar:tidak ada;}
.inputElem {width:198px;height:22px;line-height:22px;border:1px solid #ff4455;}
.parentCls{lebar:200px;}
.auto-tip li{width:100%;height:22px;line-height:22px;font-size:14px;}
.auto-tip li.hoverBg{latar belakang:#ddd;kursor:pointer;}
.merah{warna:merah;}
.hidden {tampilan: tidak ada;}
</gaya>
Kode JS-nya seperti berikut:
Copy kode kodenya sebagai berikut:
/**
* Email plugin prompt otomatis
* @konstruktor EmailAutoComplete
* @ opsi {objek} item yang dapat dikonfigurasi
*/
fungsi EmailAutoComplete(pilihan) {
ini.config = {
targetCls: '.inputElem', // elemen masukan target
parentCls: '.parentCls', //Kelas induk dari elemen masukan saat ini
HiddenCls: '.hiddenCls', // kolom tersembunyi masukan saat ini
searchForm: '.jqtransformdone', //formulir
hoverBg: 'hoverBg', // Latar belakang tempat mouse digerakkan
inputValColor: 'merah', //Kotak masukan masukan warna prompt
mailArr: ["@qq.com","@qq2.com","@gmail.com","@126.com","@163.com","@hotmail.com","@yahoo.com ","@yahoo.com.cn","@live.com","@sohu.com","@sina.com"], //Susunan email
isSelectHide: true, // Apakah akan menyembunyikan kotak drop-down saat diklik, itu benar secara default.
callback: null //Klik fungsi panggilan balik item
};
ini.cache = {
onlyFlag : true, // Hanya dirender sekali
Indeks saat ini : -1,
indeks lama : -1
};
this.init(pilihan);
}
EmailAutoComplete.prototipe = {
konstruktor: EmailAutoComplete,
init: fungsi(pilihan){
this.config = $.extend(this.config,options || {});
var diri = ini,
_config = mandiri.config,
_cache = mandiri.cache;
$(_config.targetCls).each(fungsi(indeks,item){
$(item).keyup(fungsi(e){
var target = e.target,
targetVal = $.trim($(ini).val()),
kode kunci = e.kode kunci,
elemHeight = $(ini).outerHeight(),
elemWidth = $(ini).outerWidth(),
parentNode = $(ini).terdekat(_config.parentCls);
$(parentNode).css({'posisi':'relatif'});
//Jika nilai kotak input kosong, kotak drop-down disembunyikan
if(targetVal == '') {
$(barang).attr({'data-html':''});
//Menetapkan nilai ke bidang tersembunyi
$(_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);
}kalau tidak {
$(barang).attr({'data-html':targetVal});
//Menetapkan nilai ke bidang tersembunyi
$(_config.hiddenCls,parentNode).val(targetVal);
$(".auto-tip",parentNode) && $(".auto-tip",parentNode).hasClass('hidden') && $(".auto-tip",parentNode).removeClass('hidden');
// Render konten kotak drop-down
self._renderHTML({keycode:keycode,e:e,target:target,targetVal:targetVal,height:elemHeight,width:elemWidth,parentNode:parentNode});
}
});
});
// Mencegah formulir dikirimkan dengan tombol enter default
$(_config.searchForm).each(fungsi(indeks,item) {
$(item).keydown(fungsi(e){
var keyCode = e.keyCode;
if(Kode Kunci == 13) {
kembali salah;
}
});
});
// Kotak drop-down disembunyikan saat dokumen diklik.
$(dokumen).klik(fungsi(e){
e.stopPropagasi();
var target = e.target,
tagCls = _config.targetCls.replace(/^/./,'');
if(!$(target).hasClass(tagCls)) {
$('.auto-tip') && $('.auto-tip').each(function(index,item){
!$(item).hasClass('tersembunyi') && $(item).addClass('tersembunyi');
});
}
});
},
/*
* Render konten prompt kotak drop-down
* @param cfg{objek}
*/
_renderHTML: fungsi(cfg) {
var diri = ini,
_config = mandiri.config,
_cache = mandiri.cache,
kurva;
var curIndex = self._keyCode(cfg.keycode);
$('.auto-tip',cfg.parentNode).hasClass('hidden') && $('.auto-tip',cfg.parentNode).removeClass('hidden');
jika(Indeks saat ini > -1){
// Operasi naik dan turun keyboard
self._keyUpAndDown(cfg.targetVal,cfg.e,cfg.parentNode);
}kalau tidak {
if(/@/.test(cfg.targetVal)) {
curVal = cfg.targetVal.replace(/@.*/,'');
}kalau tidak {
curVal = cfg.targetVal;
}
if(_cache.onlyFlag) {
$(cfg.parentNode).append('<input type="hidden"/>');
var bungkus = '<ul>';
untuk(var i = 0; saya < _config.mailArr.length; i++) {
bungkus += '<li>'+'<span></span><em data-html="'+_config.mailArr[i]+'">'+_config.mailArr[i]+'</em> </li>';
}
bungkus += '</ul>';
_cache.onlyFlag = salah;
$(cfg.parentNode).append(bungkus);
$('.auto-tip',cfg.parentNode).css({'position':'absolute','top':cfg.height,'width':cfg.width - 2 + 'px','left' :0,
'border':'1px solid #ccc','z-index':10000});
}
//Tambahkan atribut data-html ke semua 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});
});
//Konten yang sama persis
self._accurateMate({target:cfg.target,parentNode:cfg.parentNode});
//Saat mouse bergerak di atas item li
self._itemHover(cfg.parentNode);
//Saat item terkait diklik
self._executeClick(cfg.parentNode);
}
},
/**
* Sama persis dengan sesuatu
*/
_accurateMate: fungsi(cfg) {
var diri = ini,
_config = mandiri.config,
_cache = mandiri.cache;
var curVal = $.trim($(cfg.target,cfg.parentNode).attr('data-html')),
Arrs baru = [];
if(/@/.test(curVal)) {
// Dapatkan nilai sebelum dan sesudah @
awalan var = curVal.replace(/@.*/, ""),
akhiran = curVal.replace(/.*@/, "");
$.peta(_config.mailArr,fungsi(n){
var reg = RegExp baru(akhiran);
if(reg.test(n)) {
newArrs.push(n);
}
});
if(newArrs.length > 0) {
$('.auto-tip',cfg.parentNode).html('');
$(".auto-tip",cfg.parentNode) && $(".auto-tip",cfg.parentNode).hasClass('hidden') &&
$(".auto-tip",cfg.parentNode).removeClass('tersembunyi');
varhtml = '';
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);
//Tambahkan atribut data-html ke semua li
$('.auto-tip li',cfg.parentNode).each(function(index,item){
$('.output-num',item).html(awalan);
!$('.output-num',item).hasClass(_config.inputValColor) &&
$('.output-num',item).addClass(_config.inputValColor);
var emVal = $.trim($('.em',item).attr('data-html'));
$(barang).attr('data-html','');
$(item).attr({'data-html':awalan + ''+emVal});
});
// Ketika suatu item sudah cocok secara akurat, buat indeks saat ini sama dengan nilai awal
_cache.currentIndex = -1;
_cache.oldIndex = -1;
$('.auto-tip .output-num',cfg.parentNode).html(awalan);
//Saat mouse bergerak di atas item li
self._itemHover(cfg.parentNode);
//Saat item terkait diklik
self._executeClick(cfg.parentNode);
}kalau tidak {
$(".auto-tip",cfg.parentNode) && !$(".auto-tip",cfg.parentNode).hasClass('hidden') &&
$(".auto-tip",cfg.parentNode).addClass('tersembunyi');
$('.auto-tip',cfg.parentNode).html('');
}
}
},
/*
* Saat mouse bergerak di atas item li
*/
_itemHover: fungsi(parentNode) {
var diri = ini,
_config = mandiri.config,
_cache = mandiri.cache;
$('.auto-tip li',parentNode).hover(function(index,item) {
!$(ini).hasClass(_config.hoverBg) && $(ini).addClass(_config.hoverBg);
},fungsi() {
$(ini).hasClass(_config.hoverBg) && $(ini).removeClass(_config.hoverBg);
});
},
/*
* Ketika nilai kotak input kosong, semua item li dihapus dengan kelas hoverBg
*/
_removeBg: fungsi(parentNode){
var diri = ini,
_config = mandiri.config;
$(".auto-tip li",parentNode).each(function(index,item){
$(item).hasClass(_config.hoverBg) && $(item).removeClass(_config.hoverBg);
});
},
/**
* Pengoperasian tombol atas dan bawah keyboard
*/
_keyUpAndDown: function(targetVal,e,parentNode) {
var diri = ini,
_cache = mandiri.cache,
_config = mandiri.config;
// Jika data dikembalikan setelah permintaan berhasil (dinilai berdasarkan panjang elemen), lakukan operasi berikut
if($('.auto-tip' + ' li',parentNode) && $('.auto-tip' + ' li').length > 0) {
var plen = $('.auto-tip' + ' li',parentNode).length,
kode kunci = e.kode kunci;
_cache.oldIndex = _cache.currentIndex;
// Operasi pindah ke atas
if(Kode Kunci == 38) {
if(_cache.currentIndex == -1) {
_cache.currentIndex = plen - 1;
}kalau tidak {
_cache.currentIndex = _cache.currentIndex - 1;
if(_cache.indeks saat ini < 0) {
_cache.currentIndex = plen - 1;
}
}
if(_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);
//Menetapkan nilai ke bidang tersembunyi
$(_config.hiddenCls,parentNode).val(curAttr);
}
}else if(keyCode == 40) { //Pindahkan operasi ke bawah
if(_cache.currentIndex == plen - 1) {
_cache.currentIndex = 0;
}kalau tidak {
_cache.currentIndex++;
if(_cache.currentIndex > plen - 1) {
_cache.currentIndex = 0;
}
}
if(_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);
//Menetapkan nilai ke bidang tersembunyi
$(_config.hiddenCls,parentNode).val(curAttr);
}
}else if(keyCode == 13) {//Masukkan operasi
var curVal = $('.auto-tip' + ' .p-index'+_cache.oldIndex,parentNode).attr('data-html');
$(_config.targetCls,parentNode).val(curVal);
//Menetapkan nilai ke bidang tersembunyi
$(_config.hiddenCls,parentNode).val(curVal);
if(_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: fungsi(kode) {
var arrs = ['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++) {
if(kode == arrs[i]) {
kembalikan saya;
}
}
kembali -1;
},
/**
* Jika datanya sama, data dikembalikan saat item terkait diklik
*/
_executeKlik: fungsi(parentNode) {
var _self = ini,
_config = _self.config;
$('.auto-tip' + ' li',parentNode).unbind('klik');
$('.auto-tip' + ' li',parentNode).bind('klik',function(e){
var dataAttr = $(ini).attr('data-html');
$(_config.targetCls,parentNode).val(dataAttr);
if(_config.isSelectHide) {
!$(".auto-tip",parentNode).hasClass('hidden') && $(".auto-tip",parentNode).addClass('hidden');
}
//Menetapkan nilai ke bidang tersembunyi
$(_config.hiddenCls,parentNode).val(dataAttr);
_config.callback && $.isFunction(_config.callback) && _config.callback();
});
}
};
// inisialisasi
$(fungsi() {
EmailAutoComplete baru({});
});