In the same way, this plug-in does not require any html tags. It only needs an input box with a corresponding class name and the parent has a class name. Nothing else is needed. The internal HTML code is automatically generated.
The HTML code is as follows:
Copy the code code as follows:
<div>
<input type="text">
</div>
In fact, the above div tags are not required. You only need to add a class as above in the input input box and parent element (you can also customize it, just pass in the class during JS initialization. By default, the parent class is called parentCls. , the current input box class is called inputElem, and the hidden field class is called hiddenCls. You can directly initialize and pass in an empty object during initialization!). Because there may be multiple input boxes on the page, a parent class is needed to distinguish which input box it is. Of course, a hidden field is required to store the value for the development backend.
There is a mailbox array parameter mailArr in the configuration item: ["@qq.com","@qq2.com","@gmail.com","@126.com","@163.com","@ hotmail.com","@yahoo.com","@yahoo.com.cn","@live.com","@sohu.com","@sina.com"]. It is to tell us that there are so many default mailboxes. No matter what I enter, there are so many mailbox prompts when the drop-down box is initialized. When I pinpoint a certain item, I will give a prompt to pinpoint a certain item in the drop-down box. Of course, due to changes in demand, this parameter of the mailbox can be configured according to demand during initialization.
The coding style is still the same as before.
The functions implemented are as follows:
1. Supports keyboard movement up and down, mouse click and enter operation.
2. When clicking the document, the drop-down box is hidden except for the current input box. Automatic matching and other operations will be implemented when inputting.
I won’t go into details, but it’s similar to the automatic email prompt function when registering online. If you have any bugs, you can leave me a message. It’s getting late, so don’t be wordy! Paste the code directly:
The CSS code is as follows:
Copy the code code as follows:
<style>
*{margin:0;padding:0;}
ul,li{list-style:none;}
.inputElem {width:198px;height:22px;line-height:22px;border:1px solid #ff4455;}
.parentCls{width:200px;}
.auto-tip li{width:100%;height:22px;line-height:22px;font-size:14px;}
.auto-tip li.hoverBg{background:#ddd;cursor:pointer;}
.red{color:red;}
.hidden {display:none;}
</style>
The JS code is as follows:
Copy the code code as follows:
/**
* Email automatic prompt plug-in
* @constructor EmailAutoComplete
* @ options {object} configurable items
*/
function EmailAutoComplete(options) {
this.config = {
targetCls: '.inputElem', // target input element
parentCls: '.parentCls', //The parent class of the current input element
hiddenCls: '.hiddenCls', // current input hidden field
searchForm: '.jqtransformdone', //form form
hoverBg: 'hoverBg', // The background that the mouse moves up
inputValColor: 'red', //Input box input prompt color
mailArr: ["@qq.com","@qq2.com","@gmail.com","@126.com","@163.com","@hotmail.com","@yahoo.com ","@yahoo.com.cn","@live.com","@sohu.com","@sina.com"], //Email array
isSelectHide: true, // Whether to hide the drop-down box when clicking it is true by default.
callback: null //Click an item callback function
};
this.cache = {
onlyFlag : true, // Only render once
currentIndex : -1,
oldIndex : -1
};
this.init(options);
}
EmailAutoComplete.prototype = {
constructor: EmailAutoComplete,
init: function(options){
this.config = $.extend(this.config,options || {});
var self = this,
_config = self.config,
_cache = self.cache;
$(_config.targetCls).each(function(index,item){
$(item).keyup(function(e){
var target = e.target,
targetVal = $.trim($(this).val()),
keycode = e.keyCode,
elemHeight = $(this).outerHeight(),
elemWidth = $(this).outerWidth(),
parentNode = $(this).closest(_config.parentCls);
$(parentNode).css({'position':'relative'});
//If the input box value is empty, the drop-down box is hidden
if(targetVal == '') {
$(item).attr({'data-html':''});
//Assign a value to the hidden field
$(_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);
}else {
$(item).attr({'data-html':targetVal});
//Assign a value to the hidden field
$(_config.hiddenCls,parentNode).val(targetVal);
$(".auto-tip",parentNode) && $(".auto-tip",parentNode).hasClass('hidden') && $(".auto-tip",parentNode).removeClass('hidden');
// Render the content of the drop-down box
self._renderHTML({keycode:keycode,e:e,target:target,targetVal:targetVal,height:elemHeight,width:elemWidth,parentNode:parentNode});
}
});
});
// Prevent form form from being submitted by default enter key
$(_config.searchForm).each(function(index,item) {
$(item).keydown(function(e){
var keyCode = e.keyCode;
if(keyCode == 13) {
return false;
}
});
});
// The drop-down box is hidden when the document is clicked.
$(document).click(function(e){
e.stopPropagation();
var target = e.target,
tagCls = _config.targetCls.replace(/^/./,'');
if(!$(target).hasClass(tagCls)) {
$('.auto-tip') && $('.auto-tip').each(function(index,item){
!$(item).hasClass('hidden') && $(item).addClass('hidden');
});
}
});
},
/*
* Render drop-down box prompt content
* @param cfg{object}
*/
_renderHTML: function(cfg) {
var self = this,
_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){
// Keyboard up and down operations
self._keyUpAndDown(cfg.targetVal,cfg.e,cfg.parentNode);
}else {
if(/@/.test(cfg.targetVal)) {
curVal = cfg.targetVal.replace(/@.*/,'');
}else {
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>';
}
wrap += '</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 solid #ccc','z-index':10000});
}
//Add attribute data-html to all 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});
});
//Exactly match content
self._accurateMate({target:cfg.target,parentNode:cfg.parentNode});
//When the mouse moves over an item li
self._itemHover(cfg.parentNode);
//When the corresponding item is clicked
self._executeClick(cfg.parentNode);
}
},
/**
* Exactly match something
*/
_accurateMate: function(cfg) {
var self = this,
_config = self.config,
_cache = self.cache;
var curVal = $.trim($(cfg.target,cfg.parentNode).attr('data-html')),
newArrs = [];
if(/@/.test(curVal)) {
// Get the value before and after @
var prefix = curVal.replace(/@.*/, ""),
suffix = curVal.replace(/.*@/, "");
$.map(_config.mailArr,function(n){
var reg = new RegExp(suffix);
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);
//Add attribute data-html to all 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});
});
// When an item is accurately matched, make the current index equal to the initial value
_cache.currentIndex = -1;
_cache.oldIndex = -1;
$('.auto-tip .output-num',cfg.parentNode).html(prefix);
//When the mouse moves over an item li
self._itemHover(cfg.parentNode);
//When the corresponding item is clicked
self._executeClick(cfg.parentNode);
}else {
$(".auto-tip",cfg.parentNode) && !$(".auto-tip",cfg.parentNode).hasClass('hidden') &&
$(".auto-tip",cfg.parentNode).addClass('hidden');
$('.auto-tip',cfg.parentNode).html('');
}
}
},
/*
* When the mouse moves over an item li
*/
_itemHover: function(parentNode) {
var self = this,
_config = self.config,
_cache = self.cache;
$('.auto-tip li',parentNode).hover(function(index,item) {
!$(this).hasClass(_config.hoverBg) && $(this).addClass(_config.hoverBg);
},function() {
$(this).hasClass(_config.hoverBg) && $(this).removeClass(_config.hoverBg);
});
},
/*
* When the input box value is empty, all li items are deleted with class hoverBg
*/
_removeBg: function(parentNode){
var self = this,
_config = self.config;
$(".auto-tip li",parentNode).each(function(index,item){
$(item).hasClass(_config.hoverBg) && $(item).removeClass(_config.hoverBg);
});
},
/**
* Keyboard up and down key operations
*/
_keyUpAndDown: function(targetVal,e,parentNode) {
var self = this,
_cache = self.cache,
_config = self.config;
// If data is returned after the request is successful (judged based on the length of the element), perform the following operations
if($('.auto-tip' + ' li',parentNode) && $('.auto-tip' + ' li').length > 0) {
var plen = $('.auto-tip' + ' li',parentNode).length,
keyCode = e.keyCode;
_cache.oldIndex = _cache.currentIndex;
// Move up operation
if(keyCode == 38) {
if(_cache.currentIndex == -1) {
_cache.currentIndex = plen - 1;
}else {
_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);
//Assign a value to the hidden field
$(_config.hiddenCls,parentNode).val(curAttr);
}
}else if(keyCode == 40) { //Move down operation
if(_cache.currentIndex == plen - 1) {
_cache.currentIndex = 0;
}else {
_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);
//Assign a value to the hidden field
$(_config.hiddenCls,parentNode).val(curAttr);
}
}else if(keyCode == 13) { //Enter operation
var curVal = $('.auto-tip' + ' .p-index'+_cache.oldIndex,parentNode).attr('data-html');
$(_config.targetCls,parentNode).val(curVal);
//Assign a value to the hidden field
$(_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: function(code) {
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(code == arrs[i]) {
return i;
}
}
return -1;
},
/**
* When the data is the same, the data is returned when the corresponding item is clicked
*/
_executeClick: function(parentNode) {
var _self = this,
_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');
}
//Assign a value to the hidden field
$(_config.hiddenCls,parentNode).val(dataAttr);
_config.callback && $.isFunction(_config.callback) && _config.callback();
});
}
};
// initialization
$(function() {
new EmailAutoComplete({});
});