Точно так же этот плагин не требует никаких 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;}
ul, li {стиль списка: нет;}
.inputElem {ширина: 198 пикселей; высота: 22 пикселя; высота строки: 22 пикселя; граница: 1 пиксель сплошной #ff4455;}
.parentCls{ширина:200 пикселей;}
.auto-tip li{ширина:100%;высота:22px;line-height:22px;font-size:14px;}
.auto-tip li.hoverBg{background:#ddd;курсор:указатель;}
.red{цвет:красный;}
.скрытый {дисплей: нет;}
</стиль>
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 || {});
вар self = это,
_config = self.config,
_cache = self.cache;
$(_config.targetCls).each(функция(индекс,элемент){
$(item).keyup(function(e){
вар цель = e.target,
targetVal = $.trim($(this).val()),
код ключа = e.keyCode,
elemHeight = $(this).outerHeight(),
elemWidth = $(this).outerWidth(),
родительский узел = $(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('скрытый') && $(".auto-tip",parentNode).addClass('скрытый') ;
self._removeBg(parentNode);
}еще {
$(item).attr({'data-html':targetVal});
//Присвояем значение скрытому полю
$(_config.hiddenCls,parentNode).val(targetVal);
$(".auto-tip",parentNode) && $(".auto-tip",parentNode).hasClass('скрытый') && $(".auto-tip",parentNode).removeClass('скрытый');
// Отображение содержимого раскрывающегося списка
self._renderHTML({keycode:keycode,e:e,target:target,targetVal:targetVal,height:elemHeight,width:elemWidth,parentNode:parentNode});
}
});
});
// Запретить отправку формы по умолчанию, введите ключ
$(_config.searchForm).each(функция(индекс,элемент) {
$(пункт).keydown(функция(e){
вар keyCode = e.keyCode;
если (код ключа == 13) {
вернуть ложь;
}
});
});
// Раскрывающийся список скрывается при щелчке по документу.
$(документ).клик(функция(е){
е.stopPropagation();
вар цель = e.target,
tagCls = _config.targetCls.replace(/^/./,'');
if(!$(target).hasClass(tagCls)) {
$('.auto-tip') && $('.auto-tip').each(function(index,item){
!$(item).hasClass('скрытый') && $(item).addClass('скрытый');
});
}
});
},
/*
* Отображение содержимого подсказки раскрывающегося списка.
* @param cfg{объект}
*/
_renderHTML: функция (cfg) {
вар self = это,
_config = self.config,
_cache = self.cache,
курвал;
вар curIndex = self._keyCode(cfg.keycode);
$('.auto-tip',cfg.parentNode).hasClass('скрытый') && $('.auto-tip',cfg.parentNode).removeClass('скрытый');
если (curIndex > -1) {
// Операции с клавиатурой вверх и вниз
self._keyUpAndDown(cfg.targetVal,cfg.e,cfg.parentNode);
}еще {
if(/@/.test(cfg.targetVal)) {
curVal = cfg.targetVal.replace(/@.*/,'');
}еще {
curVal = cfg.targetVal;
}
если (_cache.onlyFlag) {
$(cfg.parentNode).append('<input type="hidden"/>');
var обертка = '<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,
'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) {
вар self = это,
_config = self.config,
_cache = self.cache;
var curVal = $.trim($(cfg.target,cfg.parentNode).attr('data-html')),
новыеArrs = [];
если(/@/.test(curVal)) {
// Получаем значение до и после @
префикс var = curVal.replace(/@.*/, ""),
суффикс = curVal.replace(/.*@/, "");
$.map(_config.mailArr,функция(n){
вар reg = новый RegExp (суффикс);
если (reg.test (n)) {
newArrs.push(n);
}
});
если (newArrs.length > 0) {
$('.auto-tip',cfg.parentNode).html('');
$(".auto-tip",cfg.parentNode) && $(".auto-tip",cfg.parentNode).hasClass('скрытый') &&
$(".auto-tip",cfg.parentNode).removeClass('скрытый');
вар 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(префикс);
!$('.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('скрытый') &&
$(".auto-tip",cfg.parentNode).addClass('скрытый');
$('.auto-tip',cfg.parentNode).html('');
}
}
},
/*
* Когда указатель мыши перемещается над элементом li
*/
_itemHover: функция (parentNode) {
вар 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);
});
},
/*
* Если значение поля ввода пусто, все элементы li удаляются с помощью класса hoverBg.
*/
_removeBg: функция(parentNode){
вар 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) {
вар self = это,
_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 = плен - 1;
}еще {
_cache.currentIndex = _cache.currentIndex - 1;
если (_cache.currentIndex <0) {
_cache.currentIndex = плен - 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 == плен - 1) {
_cache.currentIndex = 0;
}еще {
_cache.currentIndex++;
если (_cache.currentIndex > плен - 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);
если (_config.isSelectHide) {
!$(".auto-tip",parentNode).hasClass('скрытый') && $(".auto-tip",parentNode).addClass('скрытый');
}
_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++) {
если (код == arrs[i]) {
вернуть я;
}
}
вернуть -1;
},
/**
* Если данные одинаковы, данные возвращаются при нажатии соответствующего элемента.
*/
_executeClick: функция (parentNode) {
вар _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('скрытый') && $(".auto-tip",parentNode).addClass('скрытый');
}
//Присвояем значение скрытому полю
$(_config.hiddenCls,parentNode).val(dataAttr);
_config.callback && $.isFunction(_config.callback) && _config.callback();
});
}
};
// инициализация
$(функция() {
новый EmailAutoComplete({});
});