jqueryでメールオートコンプリート機能を実装する例sharing_jquery

コードをコピー コードは次のとおりです:

(function($){
$.fn.autoMail = function(options){
var autoMail = $(this);
var _value = '';
var _index = -1; var _width = autoMail.outerWidth();
var _left = autoMail.offset().left;トップ = autoMail .offset().top;
autoMail.defaults = {
deValue : '请输入邮箱地址',
textCls : 'text-gray',
listCls : 'リストメール',
listTop : 1,
mailArr : ["qq.com","gmail.com","126.com","163.com","hotmail.com","yahoo.com","yahoo .com.cn","live.com","sohu.com","sina.com"]
}
//初化
autoMail.init = function(){
autoMail。 vars = $.extend({},autoMail.defaults,options);
autoMail.val(autoMail.vars.deValue).addClass(autoMail.vars.textCls)
autoMail.click(function(event) {
autoMail.select().removeClass(autoMail.vars.textCls);
if(autoMail.val() != autoMail.vars.deValue){
autoMail.add();
autoMail.order(_value);
autoMail.list.find('.item').each(function(){
if($(this).text() == autoMail.val())
{ $(これ) .siblings('.item').removeClass('select');


を返します。 }
})
}
event.stopPropagation();
})
autoMail.blur(function(event){
if(autoMail.val() == '' || autoMail.val() == autoMail.vars.deValue){
alert(autoMail.val())
autoMail.val(autoMail.vars.deValue).addClass(autoMail.vars.textCls)
}
})
//文本域键盘松开イベント
autoMail.keyup(function(event){
if($(autoMail.list).length == 0)
{ autoMail.add() ;
}
if(autoMail.list.length > 0){
var keyCode = events.keyCode; //alert(keyCode)
switch(keyCode){
ケース 13:
autoMail.remove();
autoMail.blur();
ブレーク;
ケース 38:

if(_index _index = 0;
}
autoMail.keyOperate(_index) );

ケース 40:

; if(_index > $('.item ',autoMail.list).length - 1){
_index = ('.item',autoMail.list).length - 1
}
                            autoMail.keyOperate(_index);
                            break;
                        default:
                            if(autoMail.val().indexOf('@') < 0){
_value = autoMail.val();
autoMail.order(_value);
}
}
}
})
$(document).click(function(){
if($(autoMail.list).length > 0){
                    autoMail.remove();
                    autoMail.blur();
                }
            })
        }
        //创建列表
        autoMail.create = function(){
            var li = '';
            for(var i = 0; i < autoMail.vars.mailArr.length; i++){
li += '

'+ '' + '@' + autoMail.vars.mailArr[i] + '' + '

';
            }
            autoMail.list = $('

'+ li +'

');
autoMail.list.css({
'位置' : '絶対',
'左' : _left,
'上' : _top _height autoMail.vars.listTop,
'分-width': _width
})
autoMail.list.appendTo($('body'));
//邮箱列表绑定イベント
autoMail.list.find('.item').click(function(event){
autoMail.getVal($(this));自動メール。 delete();
event.stopPropagation();
})
autoMail.list.find('.item').hover(
function(){ $(this).addClass( ' hover'); },
function(){ $(this).removeClass('hover'); }
)
return autoMail.list;
}
//配列化列表
autoMail.order = function(_value){
$('.name',autoMail.list).remove();
var name = $('' _value '');
$('.item',autoMail.list).prepend(name);
}
//追加列表
autoMail.add = function(){
if(typeof autoMail.list == 'unknown' || autoMail.list.length < 1) autoMail.create ();
}
//削除列表
autoMail.remove = function(){
if(autoMail.list.length > 0){
autoMail.list.remove ();
autoMail.list を削除します。
}
}
//获取值
autoMail.getVal = function(obj){
if($('.name',obj).text() != '') {
var selectValue = obj.text();
autoMail.val(selectValue);  
}else{
false を返します。
}
}
//键盘操作
autoMail.keyOperate = function(_index){
$('.item',autoMail.list).eq(_index).addクラス(' hover').siblings('.item').removeClass('hover');
autoMail.val($('.item',autoMail.list).eq(_index).text());
}

コードをコピー

コードは次のとおりです: ＆lt; title＆gt; untitled document＆lt;/title＆gt;

,, text/javascript "src =" ./ automail.js "＆gt;＆lt;/script＆gt;

.automail '）。 );

body{font-family: "Microsoft Yahei"; font-size: 12px ;}
ul{リストスタイル: なし;}
input{ width : 180px; 高さ: 16px; 余白: 100px; フォントサイズ: 12px;メール ul{ ボーダー: 1px ソリッド #aaa; 行-heihgt: 24px; }
.list-mail li{ カーソル: 2px 3px; }
。リストメール .name{ カラー: #982114; }
.list-mail .hover{ 背景: #fefacf; }
.list-mail .select{ 背景: #dedaae }
style>