下面是JS输入用户名自动显示邮箱后缀列表的方法完整攻略:
标题
准备工作
要实现输入用户名自动显示邮箱后缀列表的方法，首先需要准备以下内容：
-
HTML页面中需要一个用户名输入框，一个邮箱后缀列表框；
-
JS脚本中需要一个邮箱后缀列表数组；
-
CSS样式表设置邮箱后缀列表框的位置样式。
在HTML中创建用户名输入框和邮箱列表框：
<input type="text" id="username" placeholder="请输入用户名">
<div id="email-list"></div>
在JS中创建邮箱后缀列表数组：
var emailSuffixList = ["@qq.com", "@163.com", "@126.com", "@gmail.com", "@yahoo.com", "@outlook.com", "@hotmail.com"];
设置CSS样式表的邮箱后缀列表框：
#email-list {
position: absolute;
top: 50px;
max-height: 100px;
overflow-y: auto;
border: 1px solid #ccc;
background-color: #fff;
}
实现主体功能
-
监听用户名输入框的键盘事件；
-
获取用户名输入框的值；
-
根据输入值匹配邮箱后缀列表数组中的每一项，将匹配的项添加为一个li元素，并插入邮箱列表框中。
示例代码：
var username = document.getElementById('username');
var emailList = document.getElementById('email-list');
username.addEventListener('keyup', function() {
emailList.innerHTML = ''; // 清空列表
var value = this.value;
var matchArr = emailSuffixList.filter(function(item) {
return item.indexOf(value) !== -1;
});
matchArr.forEach(function(item) {
var li = document.createElement('li');
li.innerText = item;
emailList.appendChild(li);
});
});
完整代码
<html>
<head>
<style>
#email-list {
position: absolute;
top: 50px;
max-height: 100px;
overflow-y: auto;
border: 1px solid #ccc;
background-color: #fff;
}
</style>
</head>
<body>
<input type="text" id="username" placeholder="请输入用户名">
<div id="email-list"></div>
<script>
var emailSuffixList = ["@qq.com", "@163.com", "@126.com", "@gmail.com", "@yahoo.com", "@outlook.com", "@hotmail.com"];
var username = document.getElementById('username');
var emailList = document.getElementById('email-list');
username.addEventListener('keyup', function() {
emailList.innerHTML = '';
var value = this.value;
var matchArr = emailSuffixList.filter(function(item) {
return item.indexOf(value) !== -1;
});
matchArr.forEach(function(item) {
var li = document.createElement('li');
li.innerText = item;
emailList.appendChild(li);
});
});
</script>
</body>
</html>
示例说明
示例1
当输入值为“@q”时，邮箱列表框自动显示“@qq.com”。
示例2
当输入值为“@”时，邮箱列表框自动显示所有邮箱后缀。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JS输入用户名自动显示邮箱后缀列表的方法 - Python技术站
微信扫一扫 
支付宝扫一扫 