Jquery css implements automatic mailbox completion, and jquerycss implements completion
When registering a member on an e-commerce website in the company today, users are required to prompt frequently-used email addresses in the email text box to help users select and improve the user experience. The following describes how to use Jquery + css to automatically complete emails for your reference and learning.
HTML code: emailAutoComple.html
<! Doctype html public "-// W3C // dtd html 4.01 Transitional // EN">
JS Code: js/emailAutoComple. js (key code for Automatic completion)
JQuery. autoComplete = function (selector) {var elt = $ (selector ); var strHtml = '<div class = "AutoComplete" id = "AutoComplete">' + '<ul class = "AutoComplete_ul">' + '<li hz = "@ 163.com"> </li> '+' <li hz = "@ 126.com"> </li> '+' <li hz =" @ 139.com"> </li> '+' <li hz = "@ 189.com"> </li> '+' <li hz =" @ qq.com "> </li> '+' <li hz =" @ vip.sina.com "> </li> '+' <li hz = "@ sina.cn"> </li> '+' <li hz = "@ sina.com"> </li> '+' <li hz =" @ sohu.com "> </li> '+' <li hz =" @ hotmail.com "> </li> '+' <li hz =" @ gmail.com "> </li> '+' <li hz = "@ wo.com.cn"> </li> '+' <li hz = "@ 21cn.com"> </li> '+' <li hz =" @ aliyun.com "> </li> '+' <li hz =" @ yahoo.com "> </li> '+' <li hz =" @ foxmail.com "> </li> '+' </ul> '+' </div> '; // append the div to the body $ ('body '). append (strHtml); var autoComplete, autoLi; autoComplete =te ('# AutoComplete'); autoComplete. data ('elt', elt); autoLi = autoComplete. find ('lil'); 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 () ;}); // complete the username + 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: $ (this ). offset (). left, top: $ (this ). offset (). top + $ (this ). outerHeight (true)-1, position: 'absolute ', zIndex: '000000'}); if (autoLi. filter (': visible '). length = 0) {autoComplete. hide ();} else {autoLi. filter (': visible '). eq (0 ). addClass ('hover ');}}). keydown (function (e) {if (e. keyCode = 38) {// upload autoLi. filter ('. hover '). prev (). not ('. autoComplete_title '). addClass ('hover '). next (). removeClass ('hover ');} else if (e. keyCode = 40) {// under autoLi. filter ('. hover '). next (). addClass ('hover '). prev (). removeClass ('hover ');} else if (e. keyCode = 13) {// confirm autoLi. filter ('. hover '). mousedown ();}}). focus (function () {autoComplete. data ('elt', $ (this ));}). blur (function () {autoComplete. hide ();});};
CSS code: css/emailAutoComple.css
#AutoComplete{background:#fff;border:1px solid #4190db;display:none;width:150px;}#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;}
:
The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.