同様に、このプラグインには HTML タグは必要ありません。必要なのは、対応するクラス名を含む入力ボックスだけであり、親には他に何も必要ありません。内部 HTML コードは自動的に生成されます。
HTML コードは次のとおりです。
次のようにコードをコピーします。
<div>
<input type="text">
</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;行の高さ:22px;ボーダー:1px 実線 #ff4455;}
.parentCls{幅:200px;}
.auto-tip li{幅:100%;高さ:22px;行の高さ:22px;フォントサイズ:14px;}
.auto-tip li.hoverBg{背景:#ddd;カーソル:ポインタ;}
.red{色:赤;}
.hidden {表示:なし;}
</スタイル>
JSコードは次のとおりです。
次のようにコードをコピーします。
/**
* メール自動プロンプトプラグイン
* @constructor EmailAutoComplete
* @ options {object} 設定可能な項目
*/
関数 EmailAutoComplete(オプション) {
this.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: true, // ドロップダウン ボックスをクリックしたときに非表示にするかどうかは、デフォルトで true です。
callback: null //アイテムをクリックするコールバック関数
};
this.cache = {
onlyFlag : true, // レンダリングは 1 回のみ
currentIndex : -1、
古いインデックス : -1
};
this.init(オプション);
}
EmailAutoComplete.prototype = {
コンストラクター: EmailAutoComplete、
init: 関数(オプション){
this.config = $.extend(this.config,options || {});
var self = これ、
_config = self.config、
_cache = self.cache;
$(_config.targetCls).each(function(index,item){
$(アイテム).keyup(関数(e){
var target = e.target、
targetVal = $.trim($(this).val()),
キーコード = e.keyCode、
elemHeight = $(this).outerHeight(),
elemWidth = $(this).outerWidth(),
parentNode = $(this).closest(_config.parentCls);
$(parentNode).css({'position':'relative'});
//入力ボックスの値が空の場合、ドロップダウン ボックスは非表示になります
if(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(親ノード);
}それ以外 {
$(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});
}
});
});
// デフォルトの Enter キーでフォームが送信されないようにする
$(_config.searchForm).each(function(index,item) {
$(アイテム).keydown(関数(e){
var keyCode = e.keyCode;
if(キーコード == 13) {
false を返します。
}
});
});
// ドキュメントをクリックすると、ドロップダウン ボックスが非表示になります。
$(document).click(function(e){
e.stopPropagation();
var target = e.target、
tagCls = _config.targetCls.replace(/^/./,'');
if(!$(ターゲット).hasClass(tagCls)) {
$('.auto-tip') && $('.auto-tip').each(function(index,item){
!$(item).hasClass('hidden') && $(item).addClass('hidden');
});
}
});
}、
/*
* ドロップダウン ボックス プロンプトのコンテンツをレンダリングする
* @param cfg{オブジェクト}
*/
_renderHTML: 関数(cfg) {
var self = これ、
_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');
if(curIndex > -1){
// キーボードの上下操作
self._keyUpAndDown(cfg.targetVal,cfg.e,cfg.parentNode);
}それ以外 {
if(/@/.test(cfg.targetVal)) {
curVal = cfg.targetVal.replace(/@.*/,'');
}それ以外 {
curVal = cfg.targetVal;
}
if(_cache.onlyFlag) {
$(cfg.parentNode).append('<input type="hidden"/>');
var ラップ = '<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 ソリッド #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) {
var self = これ、
_config = self.config、
_cache = self.cache;
var curVal = $.trim($(cfg.target,cfg.parentNode).attr('data-html')),
newArrs = [];
if(/@/.test(curVal)) {
// @の前後の値を取得
var prefix = curVal.replace(/@.*/, ""),
suffix = curVal.replace(/.*@/, "");
$.map(_config.mailArr,function(n){
var reg = 新しい RegExp(サフィックス);
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('hidden');
var 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: 関数(親ノード) {
var self = これ、
_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);
});
}、
/*
* 入力ボックスの値が空の場合、クラス hoverBg ですべての li 項目が削除されます
*/
_removeBg: 関数(親ノード){
var self = これ、
_config = self.config;
$(".auto-tip li",parentNode).each(function(index,item){
$(item).hasClass(_config.hoverBg) && $(item).removeClass(_config.hoverBg);
});
}、
/**
※キーボードの上下キー操作
*/
_keyUpAndDown: function(targetVal,e,parentNode) {
var self = これ、
_cache = self.cache、
_config = self.config;
// リクエスト成功後にデータが返ってきた場合(要素の長さで判断)、以下の操作を行う
if($('.auto-tip' + ' li',parentNode) && $('.auto-tip' + ' li').length > 0) {
var plen = $('.auto-tip' + ' li',parentNode).length,
キーコード = e.keyCode;
_cache.oldIndex = _cache.currentIndex;
// 上に移動操作
if(キーコード == 38) {
if(_cache.currentIndex == -1) {
_cache.currentIndex = plen - 1;
}それ以外 {
_cache.currentIndex = _cache.currentIndex - 1;
if(_cache.currentIndex < 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);
//隠しフィールドに値を代入する
$(_config.hiddenCls,parentNode).val(curAttr);
}
}else if(keyCode == 40) { //下に移動操作
if(_cache.currentIndex == plen - 1) {
_cache.currentIndex = 0;
}それ以外 {
_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);
//隠しフィールドに値を代入する
$(_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);
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: 関数(コード) {
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(コード == arrs[i]) {
私を返します。
}
}
-1 を返します。
}、
/**
※データが同一の場合、該当項目をクリックするとデータが返されます
*/
_executeClick: function(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);
if(_config.isSelectHide) {
!$(".auto-tip",parentNode).hasClass('hidden') && $(".auto-tip",parentNode).addClass('hidden');
}
//隠しフィールドに値を代入する
$(_config.hiddenCls,parentNode).val(dataAttr);
_config.callback && $.isFunction(_config.callback) && _config.callback();
});
}
};
// 初期化
$(関数() {
new EmailAutoComplete({});
});