Effect chart
Code section
Copy Code code as follows:
JavaScript Document
(function ($) {
$.fn.extend ({
' Changetips ': function (value) {
Value = $.extend ({
Divtip: ""
},value)
var $this = $ (this);
var indexli = 0;
Click Document to hide the drop down layer
$ (document). Click (Function (event) {
if ($ (event.target). attr ("class") = = Value.divtip | | $ (event.target). is ("Li")) {
var lival = $ (event.target). text ();
$this. Val (lival);
Blus ();
}else{
Blus ();
}
})
Hide drop down layer
function Blus () {
$ (Value.divtip). Hide ();
}
Functions that are executed up and down the keyboard
function Keychang (UP) {
if (up = = "Up") {
if (Indexli = = 1) {
INDEXLI = $ (value.divtip). Children (). Length-1;
}else{
indexli--;
}
}else{
if (Indexli = = $ (value.divtip). Children (). length-1) {
INDEXLI = 1;
}else{
indexli++;
}
}
$ (Value.divtip). Children (). EQ (indexli). addclass ("active"). Siblings (). Removeclass ();
}
When a value changes
function Valchange () {
var tex = $this. val ()//value of the input box
var fronts = "";//The string containing the "@"
var af =/@/;
var regmail = new RegExp (tex.substring (Tex.indexof ("@"));//A string after "@", note that the literal method is not variable. So here's the new way.
Let the hint layer show and traverse the inside of the Li
if ($this. val () = "") {
Blus ();
}else{
$ (value.divtip).
Show ().
Children ().
Each (function (index) {
var valattr = $ (this). attr ("email");
if (index==1) {$ (this). Text (Tex). addclass ("active"). Siblings (). Removeclass ();}
The Li element with index value greater than 1 is processed in
if (index>1) {
When the value entered has "@"
if (Af.test (Tex)) {
If it contains "@" to intercept the string before this symbol in the input box
Fronts = tex.substring (Tex.indexof ("@"), 0);
$ (this). Text (fronts+valattr);
Determines whether the value entered after the value "@" contains the email attribute of Li
if (Regmail.test (this). attr ("email")) {
$ (this). Show ();
}else{
if (index>1) {
$ (this). Hide ();
}
}
}
When the value entered does not have a "@"
else{
$ (this). Text (tex+valattr);
}
}
})
}
}
When the value of the input box is changed, the function is executed, and the event is handled by the judge to handle browser compatibility;
if ($.browser.msie) {
$ (this). Bind ("PropertyChange", function () {
Valchange ();
})
}else{
$ (this). Bind ("Input", function () {
Valchange ();
})
}
Mouse click and Hover li
$ (Value.divtip). Children ().
Hover (function () {
INDEXLI = $ (this). index ();//Get the Li indexed value of the current mouse hover;
if ($ (this). Index ()!=0) {
$ (this). AddClass ("active"). Siblings (). Removeclass ();
}
})
Move the background color of Li by pressing the keyboard up and down
$this. KeyDown (function (event) {
if (Event.which = = 38) {//Up
Keychang ("Up")
}else if (Event.which = 40) {//Down
Keychang ()
}else if (Event.which = 13) {//Enter
var lival = $ (value.divtip). Children (). EQ (indexli). text ();
$this. Val (lival);
Blus ();
}
})
}
})
}) (JQuery)
First, functional analysis:
1.input the value of the input box, when the change occurs, the display prompts the drop layer;
2.input the value of the input box, when the change occurs, the Drop-down layer showing the hint, will automatically add to the "@" according to the input content;
3.input the value of the input box, when the change occurs, the Drop-down layer showing the hint, will be based on the content of the Drop-down layer after the "@" filter;
4. Click on the content of the Drop-down layer, will be its value, fill in the input box;
5. Press the key of the mouse to select the contents of the Drop-down layer, fill in the input box;
6. Press the keyboard "up" or "down" direction key, you can move in the Drop-down layer options (circular movement, change the current Li background color);
7. When the mouse hovers over the lower layer of Li, there will be a background color.
Second, the function realizes:
1.input the value of the input box, when the event is changed: PropertyChange (IE) or input (standard);
2. When the PropertyChange event occurs, take the value of its input box, and then take the value of the "@", and assign value to Li plus Li's email attribute value in the drop layer;
3. In the event of a PropertyChange incident,
3.1 Take the value of its input box, and then the value after the "@",
3.2 The value is matched with the Li's email attribute value in the drop down layer.
Note here that the regular literal method cannot be used with a variable. So here's the new way.
The positive here is the value that follows the input box "@", so regular is the change. And Li's email attribute value is unchanged.
4. An event delegate is used here to bind the Click event to the document, and then by judging what the DOM element is initially triggered when clicked. To decide,
4.1 No hidden drop down hint layer?
4.2 Or you need to assign the drop down layer, the selected value, to the input box
(This can not be used directly, when the input box loses focus, hide the drop-down hint layer, because it will be with the click of the Drop-down layer, its value into the input box, this function has a logical contradiction;)
5. Similar to article 4th above;
6. It is necessary to note that in the mouse hover, the current Li index into a global variable, so you can tell the "up" or "down" when the key, the starting position;
7. Traverse Li, and give them a hover event to bind a processing function that changes its current background color;
Thank you for the video from "Wonderful Class"
Online Demo http://demo.jb51.net/js/2012/myinputMail/
Package Download Myinputmail_jb51.rar
