JQuery Implementation AutoFill mailbox function (with Drop-down prompts) _jquery

In doing this function, I refer to NetEase registration (http://reg.163.com/reg/reg.jsp?product=urs) in the mailbox column to achieve the function and effect. The purpose of this function is to enable users to fill in the mailbox column in the process, with the mailbox suffix name of the menu prompts, you can not need to fully enter their own registered mailbox, to achieve convenient, fast, friendly effect. In doing this function, the need to fully stand on the user's point of view, to see how the design can best meet the normal situation of people's use habits, and how to design instead will make users feel inconvenience. First look at the functional implementation of the demo effect chart:

Online Demo: http://jsfiddle.net/vudr00xc/embedded/result/

① initial state, when the mailbox column does not have the focus

And when the mouse clicks to gain focus

② the Prompt menu does not appear when you start with a blank character (space, tab), and @

③ Enter valid characters, prompts Drop-down menu appears, user input content automatically added into the menu, and the first hint column to get highlighted

④ the first occurrence of the character entered "@", the input "@" does not add to the hint menu

When a valid character appears after ⑤ "@", the message suffix in the prompt menu is compared to the suffix from the first, and the prompts for the mailbox suffix that are entered with the user are removed from the menu. The first hint after filtering gets highlighted. After the exact match, the Drop-down menu is hidden.

⑥ the user deletes the characters in the message input box, the order of effects rendered is ⑤ Figure 3--->⑤ Figure 2--->⑤ figure 1--->④ diagram

⑦ Press the keyboard direction key up or down to make the menu prompt to highlight

⑧ mouse across the menu prompts, the original highlight disappeared, the mouse across the column to get highlighted; the mouse to move away, keep the mouse before the column highlighted, until the user continues to enter characters, column loss highlighting, while the first visible hint highlighted

⑨ Click Highlighting or highlight the return, automatically fill the mailbox elements, choose to complete, the menu is closed

⑩ When the Drop-down menu expands, the mouse clicks on any element of the page and the menu is closed

Note: This feature does not include the regular verify mailbox format.

This feature does not use any complex knowledge points, only simple JS string matching (match), location search (indexOf), interception (substr) and jquery selector applications. More important is the logical analysis of the function to clear thinking, as well as how to design can really make users easy to operate. The main events of this feature include:

Code Analysis:

HTML and CSS code:

Html

<div class= "IPT" > <input type= "text" name= "Uemail" id= "Uemail" placeholder= "
   Please enter a common mailbox"/> <ul
   class= "Autoul" ></ul>
</div>

Css

. ipt{width:218px;} /* Input box perimeter div/
input{margin:0; padding-left:15px; padding-right:15px; width:184px; /* Input Box
/ul.autoul{/* pull-down menu

  /width:216px;
  margin:0px;
  margin-top:-5px;
  padding:0px;
  Color: #666;
  border:1px solid #666;
  border-top:0;
  Overflow:hidden;
}
Ul.autoul li.autoli{/* Pull-down Menu Li * * *

  height:30px;
  Display:block;
  List-style-type:none;
  Text-align:left;
  Cursor:pointer;
  font-size:14px;
  line-height:30px;
  padding-left:15px;
  padding-right:15px;
  Overflow:hidden;
  /* Displays an ellipsis when text overflows inside an object
  /text-overflow:ellipsis 
;
lihover{/* Dropdown menu Li Highlight Style * *

  background-color: #eee;
}
span{padding-right:2px;} /* Li under the text
/* showli{Display:block;} /* The style of the filtered Li * *

After the DOM is loaded, initialize the mailing list and hide the Drop-down menu, JS code snippet:

$ (function () {

  ///Initialize mailbox list
  var mail = new Array ("Sina.com", "126.com", "163.com", "gmail.com", "qq.com", "" Vip.qq.com "," hotmail.com "," sohu.com "," 139.com "," vip.sina.com "," 21cn.cn "," 189.cn "," sina.cn ");

  Add the mailbox list to Drop-down for
  (var i=0;i<mail.length;i++) {
  
    var $liElement = $ ("<li class=\" Autoli\ ><span class =\ "ex\" ></span><span class=\ "at\" >@</span><span class=\ "step\" > "+mail[i]+" </span ></li> ");

    $liElement. Appendto ("Ul.autoul");
  }

  The Drop-down menu initially hides
  $ (". Autoul"). Hide ();
  
  Other events (...
) ...);

The KeyUp and KeyDown events for the input box $ ("#uemail") are the primary event of the feature, and the KeyUp event is used when the character is entered instead of the KeyDown event because the KeyUp event is triggered when the user lifts the keyboard key, which is the final stage of the entire button action. So when you lift the button can see the corresponding action is real-time see the input characters; while using the KeyDown event, only the next time you press the keyboard button to see the last time you press the button to trigger the action, so the KeyDown event in the keyboard to obtain page control using more, Therefore, use the KeyDown event when using the keyboard direction key ↑↓ to select a menu prompt.

Enter the character
 $ ("#uemail") in the Mailbox entry box. KeyUp (function () {
 
    //...
 })

KeyUp event for message input box $ ("#uemail"):

① has the input key, makes the input box has the length (because the deletion event is also the judgment match and the length, therefore only needs to add the deletion event specific action, does not have to exclude deletes the event here)

if (event.keycode!=38 && event.keycode!=40 && event.keycode!=13) {//menu presentation, you need to exclude the start of the space and the "@" Start if ($
        . Trim ($ (this). Val ())!= "" && $.trim (this.value). Match (/^@/) ==null) {$ ('. Autoul '). Show (); At the same time remove the original highlight, the first hint to highlight if ($ (". Autoul li.lihover"). Hasclass ("Lihover")) {$ (". Autoul li.lihover"). Removecla
        SS ("Lihover");
      } $ (". Autoul li:visible:eq (0)"). AddClass ("Lihover");
        }else{//if it is empty or the beginning of "@" $ (". Autoul"). Hide ();
      $ (". Autoul li:eq (0)"). Removeclass ("Lihover"); ///Fill in the prompts with the characters entered, there are two situations: 1. Before "@", fill in the characters before "@" and 2. If there are characters after the first "@" and "@", do not fill//appear before @ if ($.trim (this.value)
          . Match (/[^@]@/) ==null) {//Enter a character that does not contain "@" or "@" if ($.trim (this.value). Match (/^@/) ==null) {//Not begin with ' @ '
        $ (this). Next (). Children ("Li"). Children (". ex"). Text ($ (this). Val ()); }else{///input characters, the first occurrence of the "@" not in the first place after the first appearance @, there are 2 kinds of situation: 1. continue to enter; 2. No continue input//var str when continuing = this.value;//all characters entered var strs = new Array (); STRs = Str.split ("@");//All characters entered are delimited by "@" (". ex"). Text (strs[0]);//Before "@" before var len = strs[0].length;//"@" The length of the input if (this.value.length>len+1) {//intercepts the string after the @, the length of the string before @ and the length of the @, len+1 the Var strrig from the first bit)

          HT = STR.SUBSTR (len+1);
            The regular mask matches the backslash "\" if (Strright.match (/[\\]/)!=null) {Strright.replace (/[\\]/, "");
          return false;
            ///Traverse Li $ ("Ul.autoul Li"). each (function () {//Traverse span//$ (this) Li $ (this). Children ("Span.step"). The string after each (function () {//@) is compared to the message suffix//when the input character and the message suffix in the dropdown match and appear in the first Bit appears//$ (this) span.step if ($ ("Ul.autoul Li"). Children ("Span.step"). Text (), Match (Strright)!=nul
                L && $ (this). Text (). IndexOf (strright) ==0) {//class Showli the attributes that are added to the matching message Li after the character and mailing list comparison match after the input box @ $ (this). Parent (). addclass("Showli"); If the entered character and cue menu match exactly, remove the highlight and Showli, and prompt to hide if strright.length>=$ (this). Text (). Length) {$ (
                This). Parent (). Removeclass ("Showli"). Removeclass ("Lihover"). Hide ();
              }}else{$ (this). Parent (). Removeclass ("Showli");
                } if ($ (this). Parent (). Hasclass ("Showli")) {$ (a). Parent (). Show ();
              $ (this). Parent ("Li"). Parent ("UL"). Children ("Li.showli:eq (0)"). AddClass ("Lihover");
                }else{$ (this). Parent (). Hide ();
              $ (this). Parent (). Removeclass ("Lihover");
          }
            });
        });
          $ (". Autoul") after}else{//"@" without continuing to enter. Children (). Show ();
          $ ("Ul.autoul li"). Removeclass ("Showli");
          $ ("Ul.autoul li.lihover"). Removeclass ("Lihover");
        $ ("Ul.autoul li:eq (0)"). AddClass ("Lihover"); }}}//valid input key event end

② button is backspace (8) or delete (46)

if (Event.keycode = = 8 | | event.keycode = =) {
 
   $ (this). Next (). Children (). Removeclass ("Lihover");
   $ (this). Next (). Children ("Li:visible:eq (0)"). AddClass ("Lihover");
 Delete Event End

③ buttons for arrow keys ↑ (38)

if (Event.keycode = =) {
       //make the cursor always to the right of the input box text
      $ (this). Val ());
 Arrow keys ↑ END

④ key to enter (13)

if (Event.keycode = = {

      if ($ ("Ul.autoul Li"). Is (". Lihover")) {

        $ ("#uemail"). Val ($ ("Ul.autoul li.lihover") . Children (". ex"). Text () + "@" + $ ("Ul.autoul li.lihover"). Children (". Step"). Text ());

      $ (". Autoul"). Children (). hide ();
      $ (". Autoul"). Children (). Removeclass ("Lihover"); 
      $ ("#uemail"). focus ()//Enter after entry field

This is the end of the KeyUp event.

# ("#uemail") KeyDown event

$ ("#uemail"). KeyDown (function () {

  if (Event.keycode = =) {
    //key to ↓ ...
  }

  
  if (Event.keycode = =) {
   //key to ↑ when ...
  }} 
)

⑤ button for direction ↓ (40)

if (Event.keycode = =) {

      //when the keyboard presses ↓, if an Li is already selected, remove the state and assign the style to the next (visible) Li
      if ("Ul.autoul Li"). Is (". Lihover ")) {

        //if the next (visible) Li is also present if
        ($ (" Ul.autoul li.lihover "). Nextall (). Is (" li:visible ")) {if (

          $ () Ul.autoul li.lihover "). Nextall (). Hasclass (" Showli ")) {$ (" Ul.autoul li.lihover ").

            removeclass (" Lihover ")
                . Nextall (". Showli:eq (0)"). AddClass ("Lihover");
          else {

            $ ("Ul.autoul li.lihover"). Removeclass ("Lihover"). Removeclass ("Showli").
                Next ("Li:visible"). AddClass ("Lihover");
            $ ("Ul.autoul"). Children (). Show ();
        else {

          $ ("Ul.autoul li.lihover"). Removeclass ("Lihover");
          $ ("Ul.autoul li:visible:eq (0)"). AddClass ("Lihover");}} 

⑥ buttons for arrow keys ↑ (38)

if (Event.keycode = = 38) {//When the keyboard presses ↓, if there is already an Li in the selected state, remove the state and assign the style to the next (visible) Li if ("Ul.autoul Li"). Is (". Lihover") ) {//If the previous (visible) Li is also present if ($ ("Ul.autoul li.lihover"). Prevall (). Is ("li:visible")) {if ($ ("ul.au
                Toul li.lihover "). Prevall (). Hasclass (" Showli ")) {$ (" Ul.autoul li.lihover "). Removeclass (" Lihover ")
          . Prevall (". Showli:eq (0)"). AddClass ("Lihover"); }else{$ ("Ul.autoul li.lihover"). Removeclass ("Lihover"). Removeclass ("Showli"). Prev ("Li:visib
            Le "). AddClass (" Lihover ");
          $ ("Ul.autoul"). Children (). Show ();
          }}else{$ ("Ul.autoul li.lihover"). Removeclass ("Lihover");
        $ ("Ul.autoul Li:visible:eq (" + ($ ("Ul.autoul li:visible"). Length-1) + ")". AddClass ("Lihover"); }else{//When the keyboard presses ↓, if no previous Li is selected, the first (visible) Li is selected $ ("Ul.autoul Li:visible:eq" ("Ul.autoul Li:vis
      Ible "). Length-1) + (") "). AddClass (" Lihover "); }
}

This is the end of the KeyDown event.

⑦ when the mouse clicks on the specific content of the Pull-down menu

$ (". Autoli"). Click (function () {
   
     $ (#uemail). Val ($ (this). Children (". ex"). Text () +$ (this). Children (". at"). Text () +$ (this). Children (". Step"). Text ());
     $ (". Autoul"). Hide ();
 });
   Mouse click Drop-down Menu Specific Content event end

⑧ when the mouse clicks on the document, the dropdown hides

$ ("Body"). Click (function () {
   
     $ (". Autoul"). Hide ();
 });
 Mouse click Document Event ended

⑨ Mouse across Li

$ ("Ul.autoul li"). Hover (function () {

    if ($ ("Ul.autoul li"). Hasclass ("Lihover")) {

      $ ("Ul.autoul Li"). Removeclass ("Lihover");
    }
    $ (this). addclass ("Lihover");
  });

At this point, the function is complete.