jquery从自动填充列表中选择选项以填充输入

Question

您好我的脚本有问题，并且真的不知道如何解决这个问题所以这是我的代码：

$(document).ready(function() {
  $('input[name*="password"]').keyup(function() {
    var password = $('input[name="password"]').val();
    var repassword = $('input[name="repassword"]').val();
    var isValid = /^[a-zA-Z0-9]*$/.test(password);
    var length = password.length;
    if (isValid && (length > 4) && (length < 16)) {
      if (password == repassword) {
        $('input[name="password"]').attr('class', 'valid');
        $('input[name="repassword"]').attr('class', 'valid');
      } else {
        $('input[name="repassword"]').attr('class', 'invalid');
      }
      if (password == "") {
        $('input[name="password"]').attr('class', 'invalid');
        $('input[name="repassword"]').attr('class', 'invalid');
      } else {
        $('input[name="password"]').attr('class', 'valid');
      }
    } else {
      $('input[name="password"]').attr('class', 'invalid');
      $('input[name="repassword"]').attr('class', 'invalid');
    }
  });
  $('#username').on('input', function() {
    $("#username").removeClass();
    var username = $(this).val();
    var isValid = /^[a-zA-Z0-9]*$/.test(username);
    var length = username.length;
    if (isValid && (length > 4) && (length < 16)) {
      $.post('username_check.php', {
        username: username
      }, function(data) {
        if (data == 0) {
          $('#username-status').attr('src', 'images/valid.jpg');
          $("#username").addClass("valid");
        } else {
          $('#username-status').attr('src', 'images/taken.jpg');
          $("#username").addClass("invalid");
        }
      });
    } else {
      $('#username-status').removeAttr('src');
      $("#username").addClass("invalid");
    }
  });
  $('#email').on('input', function() {
    $("#email").removeClass();
    var email = $(this).val();
    var isValid = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(email);
    if (isValid) {
      $.post('email_check.php', {
        email: email
      }, function(data) {
        if (data == 0) {
          $('#email-status').attr('src', 'images/valid.jpg');
          $("#email").addClass("valid");
        } else {
          $('#email-status').attr('src', 'images/taken.jpg');
          $("#email").addClass("invalid");
        }
      });
    } else {
      $('#email-status').removeAttr('src');
      $("#email").addClass("invalid");
    }
  });


  $("#regdetails input").on('input keyup', function() {
    if ($("#regdetails input:not(#loginsubmitbutton2)").length === $("#regdetails input.valid").length) {
      $("#loginsubmitbutton2").show();
    } else {
      $("#loginsubmitbutton2").hide();
    }
  });
});

#regdetails {
  width: 300px;
}
#regdetails2 {
  width: 360px;
  float: right;
  text-align: left;
  position: relative;
  top: -297px;
  height: 200px;
}
#village-clan {
  position: relative;
  float: left;
  left: 135px;
  top: -250px;
  padding-bottom: 20px;
}
#villageiconreg3 {
  position: relative;
  top: -25px;
  left: 55px;
}
#claniconreg3 {
  position: relative;
  top: -35px;
  left: 60px;
}
#otherinfo {
  position: relative;
  float: left;
  top: -140px;
  left: 75px;
}
#reg3skillpoints {
  position: relative;
  left: 120px;
  top: -140px;
}
.valid {
  border: 1px solid rgba(0, 255, 0, 1);
  background: #ffffff;
  -webkit-box-shadow: 0px 0px 5px 1px rgba(0, 255, 0, 1);
  -moz-box-shadow: 0px 0px 5px 1px rgba(0, 255, 0, 1);
  box-shadow: 0px 0px 5px 0.5px rgba(0, 255, 0, 1);
}
.invalid {
  border: 1px solid rgba(255, 0, 0, 1);
  background: #ffffff;
  -webkit-box-shadow: 0px 0px 5px 1px rgba(255, 0, 0, 1);
  -moz-box-shadow: 0px 0px 5px 1px rgba(255, 0, 0, 1);
  box-shadow: 0px 0px 5px 0.5px rgba(255, 0, 0, 1);
}
#username-status {
  position: absolute;
  margin-left: 2px;
}
#email-status {
  position: absolute;
  margin-left: 2px;
}
#register2 {
  position: relative;
  top: 60px;
  height: auto;
  width: 50%;
  margin: 0 auto;
  border-radius: 4px;
  border: 1px solid #1a171a;
  -webkit-box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.6);
  -moz-box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.6);
  box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.6);
  text-align: center;
  margin-bottom: 200px;
}
#loginsubmitbutton2 {
  background-color: #007abc;
  height: 25px;
  width: 150px;
  display: none;
  text-align: center;
  color: #0a3a8e;
  font-size: 15px;
  text-shadow: #ffffff 0 1px 0;
  border: 1px solid #f7ad00;
  background: #f7ad00;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-shadow: rgba(255, 255, 255, 0.4) 0 1px 0, inset rgba(255, 255, 255, 0.4) 0 1px 0;
  -moz-box-shadow: rgba(255, 255, 255, 0.4) 0 1px 0, inset rgba(255, 255, 255, 0.4) 0 1px 0;
  box-shadow: rgba(255, 255, 255, 0.4) 0 1px 0, inset rgba(255, 255, 255, 0.4) 0 1px 0;
}
#loginsubmitbutton2:hover {
  border: 1px solid #00519d;
  text-shadow: #2b2e28 0 1px 0;
  background: #00519d;
  color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="register2">
  <p><b>Registration Step (3/3)</b>
  </p>
  <div id="regdetails">
    <b>Fill your details:</b>
    <BR>
    <br>
    <form action="#" method="post">
      Username:
      <br>
      <input id="username" type="text" name="username">
      <img id="username-status" height="20px" width="20px">
      <br>Password:
      <br>
      <input id="password" type="password" name="password">
      <br>Re-Password:
      <br>
      <input id="repassword" type="password" name="repassword">
      <br>Email:
      <br>
      <input id="email" type="email" name="email">
      <img id="email-status" height="20px" width="20px">
      <br>
      <br>
  </div>

  <br>
  <input id="loginsubmitbutton2" type="submit" name="next" value="Next">
  <br>
  <br>
  </form>


</div>

</div>

这个片段无法正常工作，因为我使用的是mysql数据库信息所以会丢失一些值，但是你可以查看我的代码，我制作了这个视频来显示问题：https://youtu.be/nfKoSge9rh8 所以基本上一切都工作得很好，如果你用手键入每个字段，但如果你选择自动填充的示例电子邮件下一个按钮不会显示，直到你输入的东西