jquery implementation of the input box mailbox content automatic completion and Up-down flip display Effect "with demo source download" _jquery

The example of this article describes the implementation of the jquery input box mailbox content automatic completion and flip-turn display effect. Share to everyone for your reference, specific as follows:

Recently in doing a pass project, inside the registration module has the mailbox registration, the demand side wants to enter the @ to trigger the Drop-down box to display each mailbox, the effect is as follows:

HTML code:

<!
  DOCTYPE html>  

CSS code:

@charset ' Utf-8 ';
wrap{width:200px;margin:0 Auto;}
h1{font-size:36px;text-align:center;line-height:60px;}
p{font-size:20px;text-align:center;line-height:60px}
. inp{width:190px;border:1px solid #ccc; border-radius:5px;height:30px;line-height:30px;padding:5px;}
#AutoComplete {background: #fff; border:1px solid #4190db;d isplay:none;width:200px;}
#AutoComplete ul{list-style-type:none;margin:0;padding:0;}
#AutoComplete li{color: #333; cursor:pointer;font:12px/22px \5b8b\4f53;text-indent:5px;}
#AutoComplete. Hover{background: #6eb6fe; color: #fff;}

JS Code:

Jquery.autocomplete = function (selector) {var ELT = $ (selector);
  var Autocomplete,autoli;
  var strhtml = [];
  Strhtml.push (' <div class= "autocomplete" id= "AutoComplete" > ");
  Strhtml.push (' <ul class= ' Autocomplete_ul ">");
  Strhtml.push (' <li class= "Autocomplete_title" > Please select the mailbox suffix </li> ');
  Strhtml.push (' <li hz= ' @qq. com "></li>");
  Strhtml.push (' <li hz= ' @163.com "></li>");
  Strhtml.push (' <li hz= ' @126.com "></li>");
  Strhtml.push (' <li hz= ' @sohu. com "></li>");
  Strhtml.push (' <li hz= ' @sina. com "></li>");
  Strhtml.push (' </ul> ');
  Strhtml.push (' </div> ');
  $ (' body '). Append (Strhtml.join ('));
  AutoComplete = $ (' #AutoComplete ');
  Autocomplete.data (' Elt ', ELT); Autoli = Autocomplete.find (' Li:not.
  Autocomplete_title) ');
    Autoli.mouseover (function () {$ (this). Siblings (). Filter ('. Hover '). Removeclass (' hover ');
  $ (this). addclass (' hover ');
 }). mouseout (function () {   $ (this). Removeclass (' hover ');
    }). MouseDown (function () {autocomplete.data (' Elt '). Val ($ (this). Text ()). change ();
  Autocomplete.hide ();
  });
    User name complement + Flip Elt.keyup (function (e) {if (/13|38|40|116/.test (e.keycode) | | | this.value = = ") {return false;
    var username = This.value;
      if (Username.indexof (' @ ') = = 1) {autocomplete.hide ();
    return false;
      } Autoli.each (function () {this.innerhtml = Username.replace (/\@+.*/, ') + $ (this). attr (' Hz ');
      if (this.innerHTML.indexOf (username) >= 0) {$ (this). Show ();
      }else{$ (this). Hide ();
    }). filter ('. Hover '). Removeclass (' hover ');  Autocomplete.show (). css ({left: $ (). Offset (). Left, Top: $ (a). Offset (). Top + $ (this). Outerheight (True)-
    1, Position: ' Absolute ', ZIndex: ' 99999 '};
    if (Autoli.filter (': Visible '). Length = = 0) {autocomplete.hide ();
    }else{autoli.filter (': Visible '). EQ (0). addclass (' hover ');
}  }). KeyDown (function (e) {if (E.keycode = 38) {//Top Autoli.filter ('. Hover '). Prev (). Not ('.
    Autocomplete_title '). addclass (' hover '). Next (). Removeclass (' hover ');
    }else if (E.keycode = = 40) {//Next Autoli.filter ('. Hover '). Next (). addclass (' hover '). Prev (). Removeclass (' hover ');
      }else if (E.keycode = =) {//enter autoli.filter ('. Hover '). MouseDown ();  E.preventdefault ();
  If there is a form, block form submission}}. focus (function () {autocomplete.data (' ELT ', $ (this));
  }). blur (function () {autocomplete.hide ();
});

 }

result.php

<?php
Echo $_post[' email '. "<br/>". $_post[' other '];
? >

Full instance code click here to download the site.

More interested readers of jquery-related content can view the site topics: "jquery common Plug-ins and Usage summary", "jquery Ajax Usage Summary", "jquery table (table) Operation Tips Summary", "JQuery Extended Skills Summary", " jquery Common Classic Effects Summary "jquery animation and special effects usage Summary" and "jquery Selector usage Summary"

I hope this article will help you with the jquery program design.