jquery實現(xiàn)郵箱自動補全功能示例分享
更新時間：2014年02月17日 16:38:26 作者：
這篇文章主要介紹了jquery實現(xiàn)郵箱自動補全功能，大家參考使用吧
復制代碼 代碼如下:
(function($){
$.fn.autoMail = function(options){
var autoMail = $(this);
var _value = '';
var _index = -1;
var _width = autoMail.outerWidth();
var _height = autoMail.outerHeight();
var _left = autoMail.offset().left;
var _top = autoMail.offset().top;
autoMail.defaults = {
deValue : '請輸入郵箱地址',
textCls : 'text-gray',
listCls : 'list-mail',
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()){
$(this).siblings('.item').removeClass('select');
$(this).addClass('select');
return false;
}
})
}
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 = event.keyCode;
//alert(keyCode)
switch(keyCode){
case 13:
autoMail.remove();
autoMail.blur();
break;
case 38:
_index--;
if(_index < 0){
_index = 0;
}
autoMail.keyOperate(_index);
break;
case 40:
_index++;
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();
}
})
}
//創(chuàng)建列表
autoMail.create = function(){
var li = '';
for(var i = 0; i < autoMail.vars.mailArr.length; i++){
li += '<li class="item">'+ '<span class="style">' + '@' + autoMail.vars.mailArr[i] + '</span>' + '</li>';
}
autoMail.list = $('<div class="'+ autoMail.vars.listCls +'"><ul>'+ li +'</ul></div>');
autoMail.list.css({
'position' : 'absolute',
'left' : _left,
'top' : _top + _height + autoMail.vars.listTop,
'min-width': _width
})
autoMail.list.appendTo($('body'));
//郵箱列表綁定事件
autoMail.list.find('.item').click(function(event){
autoMail.getVal($(this));
autoMail.remove();
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 = $('<span class="name">'+ _value +'</span>');
$('.item',autoMail.list).prepend(name);
}
//添加列表
autoMail.add = function(){
if(typeof autoMail.list == 'undefined' || autoMail.list.length < 1) autoMail.create();
}
//移除列表
autoMail.remove = function(){
if(autoMail.list.length > 0){
autoMail.list.remove();
delete autoMail.list;
}
}
//獲取值
autoMail.getVal = function(obj){
if($('.name',obj).text() != ''){
var selectValue = obj.text();
autoMail.val(selectValue);
}else{
return false;
}
}
//鍵盤操作
autoMail.keyOperate = function(_index){
$('.item',autoMail.list).eq(_index).addClass('hover').siblings('.item').removeClass('hover');
autoMail.val($('.item',autoMail.list).eq(_index).text());
}
//開始初始話動作...
autoMail.init();
}
})(jQuery)
復制代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<script type="text/javascript" src="./jquery.js"></script>
<script type="text/javascript" src="./autoMail.js"></script>
<script type="text/javascript">
$(function(){
$('.automail').autoMail();
})
</script>
<style type="text/css">
*{padding: 0; margin: 0;}
body{font-family: "微軟雅黑"; color: #333; font-size: 12px;}
ul{list-style: none;}
input{ width: 180px; height: 16px; line-height: 16px; margin: 100px; padding: 4px; border: 1px solid #aaa; font-size: 12px; font-family: "微軟雅黑"; }
.list-mail ul{ border: 1px solid #aaa; line-heihgt: 24px; padding: 6px; }
.list-mail li{ cursor: pointer; padding: 2px 3px; margin-bottom: 2px; }
.list-mail .name{ color: #982114; }
.list-mail .hover{ background: #fefacf; }
.list-mail .select{ background: #dedaae; }
</style>
</head>
<body>
<div class="test"></div>
<input type="text" class="automail" />
</body>
</html>
您可能感興趣的文章:
- jQuery實現(xiàn)郵箱下拉列表自動補全功能
- jQuery實現(xiàn)文本框郵箱輸入自動補全效果
- jQuery實現(xiàn)Email郵箱地址自動補全功能代碼
- jquery 實現(xiàn)輸入郵箱時自動補全下拉提示功能
- 使用jquery實現(xiàn)仿百度自動補全特效
- PHP+jQuery實現(xiàn)自動補全功能源碼
- jQuery 插件autocomplete自動完成應用(自動補全)(asp.net后臺)
- jquery實現(xiàn)翻動fadeIn顯示的方法
- jQuery實現(xiàn)Flash效果上下翻動的中英文導航菜單代碼
- jQuery仿Flash上下翻動的中英文導航菜單實例
- jQuery實現(xiàn)輸入框郵箱內容自動補全與上下翻動顯示效果【附demo源碼下載】
相關文章
JQueryMiniUI按照時間進行查詢的實現(xiàn)方法
下面小編就為大家?guī)硪黄狫QueryMiniUI按照時間進行查詢的實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
這篇文章主要為大家詳細介紹了jquery實現(xiàn)具有嵌套功能的選項卡的相關資料，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-02-02
jquery實現(xiàn)靜態(tài)搜索功能(可輸入搜索文字)
本文主要介紹了jquery實現(xiàn)靜態(tài)搜索功能的示例代碼，可通過輸入搜索文字進行篩選信息。具有很好的參考價值，下面跟著小編一起來看下吧2017-03-03
這篇文章主要介紹了JQuery結合CSS操作打印樣式的方法，有需要的朋友可以參考一下2013-12-12
解決用jquery load加載頁面到div時,不執(zhí)行頁面js的問題
這篇文章主要介紹了解決用jquery load加載頁面到div時,不執(zhí)行頁面js的問題。需要的朋友可以過來參考下，希望對大家有所幫助2014-02-02
圖片滾動效果想必大家都已司空見慣了吧，接下來本文介紹下jQuery+CSS實現(xiàn)圖片滾動，感興趣的你可不要錯過了哈，希望可以幫助到你2013-03-03
jQuery實現(xiàn)點擊按鈕彈出可拖拽模態(tài)對話框完整實例【測試可用】
這篇文章主要介紹了jQuery實現(xiàn)點擊按鈕彈出可拖拽模態(tài)對話框的方法,結合完整實例形式分析了jQuery調用模態(tài)對話框的基本原理、實現(xiàn)方法與相關操作技巧,需要的朋友可以參考下2023-04-04
本篇文章是關于JQuery 常用方法和事件詳細介紹。需要的朋友參考下2013-04-04
jQuery創(chuàng)建插件的代碼分析，需要的朋友可以參考下。2011-04-04
這篇文章主要為大家詳細介紹了jQuery制作網(wǎng)頁版選項卡的相關方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-07-07