Jquery Enables automatic mailbox complementing

Jquery Enables automatic mailbox complementing

This article mainly introduces jquery's function of automatic mailbox complementing.

The Code is as follows:

(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: 'Enter the email address ',

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"]

}

// Initialization

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 );

}

})

// Text field keyboard release event

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 ();

}

})

}

// Create a list

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 '));

// Email list binding event

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;

}

// Serialization list

AutoMail. order = function (_ value ){

$ ('. Name', autoMail. list). remove ();

Var name = $ ('<span class = "name">' + _ value + '</span> ');

$ ('. Item', autoMail. list). prepend (name );

}

// Add a list

AutoMail. add = function (){

If (typeof autoMail. list = 'undefined' | autoMail. list. length <1) autoMail. create ();

}

// Remove the list

AutoMail. remove = function (){

If (autoMail. list. length> 0 ){

AutoMail. list. remove ();

Delete autoMail. list;

}

}

// Obtain the value

AutoMail. getVal = function (obj ){

If ($ ('. name', obj). text ()! = ''){

Var selectValue = obj. text ();

AutoMail. val (selectValue );

} Else {

Return false;

}

}

// Keyboard operation

AutoMail. keyOperate = function (_ index ){

$ ('. Item', autoMail. list). eq (_ index). addClass ('hover'). siblings ('. item'). removeClass ('hover ');

AutoMail. val ($ ('. item', autoMail. list). eq (_ index). text ());

}

// Start the initial action...

AutoMail. init ();

}

}) (JQuery)

 

 

The Code is as follows:

<! 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> untitled document </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>