jquery implementation of the mailbox Drop-down list Auto-complement function _jquery

Remember, in the last project, encountered such a demand, the site asked to fill out the mailbox, not yet filled out, will appear a series of Drop-down list, to help automatically fill the Full mailbox function. Today's small series for you to share my based on jquery is how to achieve this function!

function brief

• Fill in the name of the mailbox, the Drop-down list, automatically fill the Full mailbox

• Click the top and Bottom buttons to select the Drop-down list mailbox

• Press ENTER to select the contents of the list and hide the Drop-down list

• Mouse over, drop-down list option set to highlight

• Mouse click, select drop-down list option, hide Drop-down list

Html

HTML code is very simple, we have a simple input box, and then a UL tag, in the interior can put a lot of Li tags.

The above is the HTML code

Css

In CSS, the definition is also relatively simple, there is a lilight class, you can make the background color, through the Remove and add this class, we can easily implement the Drop-down list elements are selected to distinguish.

CSS all styles are as follows

. Content input{
padding:5px 10px;
width:200px;
}
ul.list{
List-style:none;
padding:0px;
margin:0px;
Overflow:hidden;
}
Ul.list li{
border:1px solid #EEE;
width:180px;
padding:5px 10px;
margin:0px;
Text-overflow:ellipsis; becomes omitted Overflow:hidden when overflow
. lilight{
background-color: #fafafa;
}

Js

We introduced jQuery to implement the operation of the elements, the implementation of keystrokes and mouse monitoring, the code is as follows

$ (function () {//Declaration of all email variables var mail=new Array ("sina.com.cn", "126.com", "163.com", "gmail.com", "qq.com", "vip.qq.com"
, "hotmail.com", "sohu.com", "139.com", "vip.sina.com", "cuiqingcai.com"); Generate an Li, and add to the UL for (Var i=0;i<mail.length;i++) {var lielement=$ ("<li class=\" autoli\ "><span class=\" ex \ "></span><span class=\" at\ ">@</span><span class=\" tail\ ">" +mail[i]+ "</span>
</li> ");
Lielement.appendto ("Ul.list");
///First let the list hide $ ("ul.list"). Hide (); $ ("#email"). KeyUp (function (event) {//type is not up and down arrows and carriage return if (event.keycode!=38&&event.keycode!=40&& EVENT.KEYCODE!=13) {//If the value entered is not empty or does not begin with a space if ($.trim (). Val ())!= "" && $.trim ($ (this). Val ()). Match (/^@/) = =null) {$ ("ul.list"). Show ();//If there is a Drop-down tab that is already highlighted, remove the IF ($ ("Ul.list li:visible"). Hasclass ("Lilight")) {$ ("Ul.list Li
"). Removeclass (" Lilight ");} If a Drop-down tab exists, highlight it if ($ ("Ul.list li:visible")) {$ ("Ul.list li:visible:eq (0)"). AddClass ("Lilight");}
else{//Otherwise no display $ ("ul.list"). Hide ();$ ("Ul.list li"). Removeclass ("Lilight"); The//input does not include the @ symbol if ($.trim (this). Val ()). Match (/.*@/) ==null) {$ ('. List li. Ex '). Text ($ (this). Val ());} The else{//input symbol already contains @ var str = $ (this). Val (); var STRs = Str.split ("@"); $ (". List li. Ex"). Text (strs[0]); if ($ (this). Val (). length>=strs[0].length+1) {tail=str.substr (strs[0].length+1); $ (". List li. Tail"). each (function () {// If an element in the array starts with a suffix in the text, it is displayed, otherwise the IF (!) is not displayed. $ (this). Text (). Match (tail)!=null&&$ (this). Text (). IndexOf (tail) ==0)) {//Hide other Li $ (this). Parent (). hide ();}
else{//Displays the Li $ (this). Parent (). Show ();}}; Writes the currently selected element to the text box if (event.keycode==13) {$ ("#email") when the carriage return is pressed. Val ($ ("Ul.list li.lilight:visible"). Text ()); $ ("
Ul.list "). Hide ();
}
});
Listens for up and DOWN ARROW keys $ ("#email"). KeyDown (The function (event) {//DOWN ARROW key presses the IF (event.keycode==40) {if ($ ("Ul.list Li"). Is (". Lilight")) { if ($ ("Ul.list li.lilight"). Nextall (). Is ("Li:visible") {$ ("ul.list li.lilight"). Removeclass ("Lilight"). Next ("Li")
. addclass ("Lilight"); The//DOWN ARROW key pressed the IF (event.keycode==38) {if ($ ("UL.list Li "). Is (". Lilight ")) {if ($ (" Ul.list li.lilight "). Prevall (). Is (" li:visible ")) {$ (" ul.list li.lilight ").
Removeclass ("Lilight"). Prev ("Li"). addclass ("Lilight");
}
}
}
});
When the mouse clicks on a Drop-down item, when selected, the Drop-down list hides $ ("Ul.list li"). Click (function () {$ (' #email '). Val ($ (this). text ()); $ ("ul.list"). Hide (); When the mouse hovers over a drop-down item, the dropdown list hides $ ("Ul.list li"). Hover (function () {$ ("Ul.list li"). Removeclass ("Lilight"); $ (this).
AddClass ("Lilight");
}); 
When the mouse clicks another location, the Drop-down list hides $ (document). Click (function () {$ ("ul.list"). Hide ();});  });

Summarize

In fact, there is a more powerful plug-ins, called AutoComplete, the same can be achieved by the automatic completion of the Drop-down list, the function is more perfect, if you are interested can go to try. However, the most commonly used is the mailbox automatically filled, and directly with JQuery can be more convenient to achieve, so the blogger did not use the AutoComplete plug-in, but he wrote a bit, one practice, and second to the realization of this function more thorough understanding.

The above is a small set of jquery to introduce the implementation of the Mailbox Drop-down list automatically fill the full function, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!