마찬가지로 이 플러그인에는 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;라인 높이:22px;테두리:1px 솔리드 #ff4455;}
.parentCls{너비:200px;}
.auto-tip li{width:100%;height:22px;line-height:22px;font-size:14px;}
.auto-tip li.hoverBg{배경:#ddd;cursor:pointer;}
.red{색상:빨간색;}
.숨김 {표시:없음;}
</style>
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,
올드인덱스 : -1
};
this.init(옵션);
}
EmailAutoComplete.prototype = {
생성자: EmailAutoComplete,
초기화: 함수(옵션){
this.config = $.extend(this.config,options || {});
var 자기 = 이것,
_config = self.config,
_cache = self.cache;
$(_config.targetCls).each(함수(색인,항목){
$(item).keyup(함수(e){
var 타겟 = 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(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});
}
});
});
// 기본 Enter 키로 양식이 제출되는 것을 방지합니다.
$(_config.searchForm).each(function(index,item) {
$(item).keydown(함수(e){
var keyCode = e.keyCode;
if(keyCode == 13) {
거짓을 반환;
}
});
});
// 문서를 클릭하면 드롭다운 상자가 숨겨집니다.
$(문서).click(함수(e){
e.stopPropagation();
var 타겟 = e.target,
tagCls = _config.targetCls.replace(/^/./,'');
if(!$(target).hasClass(tagCls)) {
$('.auto-tip') && $('.auto-tip').each(function(index,item){
!$(item).hasClass('hidden') && $(item).addClass('hidden');
});
}
});
},
/*
* 드롭다운 상자 프롬프트 내용 렌더링
* @param cfg{객체}
*/
_renderHTML: 함수(cfg) {
var 자기 = 이것,
_config = self.config,
_cache = 자체.캐시,
곡선;
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 Wrap = '<ul>';
for(var i = 0; i < _config.mailArr.length; i++) {
Wrap += '<li>'+'<span></span><em data-html="'+_config.mailArr[i]+'">'+_config.mailArr[i]+'</em> </li>';
}
포장 += '</ul>';
_cache.onlyFlag = 거짓;
$(cfg.parentNode).append(wrap);
$('.auto-tip',cfg.parentNode).css({'position':'absolute','top':cfg.height,'width':cfg.width - 2 + 'px','left' :0,
'테두리':'1px 단색 #ccc','z-index':10000});
}
//모든 li에 data-html 속성을 추가합니다.
$('.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 자기 = 이것,
_config = self.config,
_cache = self.cache;
var curVal = $.trim($(cfg.target,cfg.parentNode).attr('data-html')),
newArrs = [];
if(/@/.test(curVal)) {
// @ 전후의 값을 가져옵니다.
var 접두사 = curVal.replace(/@.*/, ""),
접미사 = curVal.replace(/.*@/, "");
$.map(_config.mailArr,함수(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);
//모든 li에 data-html 속성을 추가합니다.
$('.auto-tip li',cfg.parentNode).each(function(index,item){
$('.output-num',item).html(접두사);
!$('.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(접두사);
//마우스가 항목 위로 이동할 때 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('');
}
}
},
/*
* 마우스가 항목 위로 이동할 때 li
*/
_itemHover: 함수(부모 노드) {
var 자기 = 이것,
_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 자기 = 이것,
_config = self.config;
$(".auto-tip li",parentNode).each(function(index,item){
$(item).hasClass(_config.hoverBg) && $(item).removeClass(_config.hoverBg);
});
},
/**
* 키보드 상하 키 조작
*/
_keyUpAndDown: 함수(targetVal,e,parentNode) {
var 자기 = 이것,
_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;
// 위로 이동 작업
if(keyCode == 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: 함수(부모노드) {
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();
});
}
};
// 초기화
$(함수() {
새로운 EmailAutoComplete({});
});