jQuery实现Email邮箱地址自动补全功能代码

首先，在jQuery中实现email地址自动补全功能，我们需要编写以下几个步骤：

确认需要用的jQuery插件：这里我们使用的是"jquery-ui"这个jquery插件，它内置了一个Autocomplete组件，能够非常方便地实现email地址自动补全功能。
引入"jquery-ui"插件：在head标签内的标签内引入jquery与jquery-ui的cdn或其它方式的链接。

    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

设置input框

    <input type="email" id="email" name="email" placeholder="请输入你的邮箱地址">

编写jquery代码，完成email地址自动补全

    $('#email').autocomplete({
        source: function(request, response) {
            var hosts = ['qq.com', '163.com', 'gmail.com', 'hotmail.com'],//邮箱后缀名的枚举变量
                re = $.ui.autocomplete.escapeRegex(request.term),//输入框中的值
                matcher = new RegExp('^' + re, 'i'),//
                a = $.grep(hosts, function(item, index) {
                    return matcher.test(item);
                });
                response(a);
        }
    });

解释：

① source:设置一个回调方法，该方法返回一个建议列表。

② hosts:一个包含正常邮件系统的可能托管邮件服务器域子集的列表。

③ 搜索输入框内的值，并匹配@后面的字符串，并返回一个由匹配子集组成的数组。

至此，我们就完成了email地址自动补全功能的jquery代码。

以下是一个完整的示例，通过输入邮箱账号的前缀自动提示可能的邮箱后缀：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Email地址自动补全</title>
    <link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div class="ui-widget">
      输入邮箱地址: <input id="email" type="text" />
    </div>

    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

    <script>
      $(document).ready(function() {
          $('#email').autocomplete({
              source: function(request, response) {
                  var hosts = ['qq.com', '163.com', 'gmail.com', 'hotmail.com'],
                      re = $.ui.autocomplete.escapeRegex(request.term),
                      matcher = new RegExp('^' + re, 'i'),
                      a = $.grep(hosts, function(item, index) {
                          return matcher.test(item);
                      });
                      response(a);
              }
          });    
      });
    </script>
  </body>
</html>

另外一个示例:

为了让用户得到更好的体验，还可以增加鼠标悬浮的垂直列表选项的样式。在我们的示例代码中，可以添加下面这个样式：

.ui-menu-item {
    border-bottom: 1px dotted black;
    padding: 3px;
    cursor: pointer;
    background-color: white;
}
.ui-menu-item:hover {
    background-color: #EEE;
}

注意：为了样式不会失效，需要在jQuery UI的CSS文件后引入该样式表。

<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<link href="custom.css" rel="stylesheet" type="text/css" />

完整代码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Email地址自动补全</title>
    <link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
    <link href="custom.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div class="ui-widget">
      输入邮箱地址: <input id="email" type="text" />
    </div>

    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

    <script>
      $(document).ready(function() {
          $('#email').autocomplete({
              source: function(request, response) {
                  var hosts = ['qq.com', '163.com', 'gmail.com', 'hotmail.com'],
                      re = $.ui.autocomplete.escapeRegex(request.term),
                      matcher = new RegExp('^' + re, 'i'),
                      a = $.grep(hosts, function(item, index) {
                          return matcher.test(item);
                      });
                      response(a);
              }
          });    
      });
    </script>
  </body>
</html>

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery实现Email邮箱地址自动补全功能代码 - Python技术站

jQuery实现Email邮箱地址自动补全功能代码

相关文章