问题描述
大家晚上好。我正在实现自动完成功能作为下面的源代码。但是,当我将其应用于IE11时,它不起作用,当用户输入时它不会自动完成,而仅当我们单击输入时才起作用。我去寻找原因,但仍然找不到,希望每个人都能帮助我。非常感谢。
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
body {
font-family: 'Source Sans Pro',sans-serif;
font-size: large;
max-width: 500px;
margin: 0 auto;
}
input[type=email] {
font-size: large;
width: 400px;
-webkit-appearance: none;
appearance: none;
}
input::-webkit-calendar-picker-indicator {
display: none;
}
label {
display: block;
font-size: small;
text-transform: uppercase;
letter-spacing: 2px;
color: #999;
}
</style>
</head>
<body>
<label for="email">Email</label>
<input id="email" name="email" type="email" placeholder="your@email.com">
<script>
const EmailDomainSuggester = {
domains: ["yahoo.com","gmail.com","google.com"],bindTo: $('#email'),init: function () {
this.addElements();
this.bindEvents();
},addElements: function () {
// Create empty datalist
this.datalist = $("<datalist />",{
id: 'email-options'
}).insertAfter(this.bindTo);
// Corelate to input
this.bindTo.attr("list","email-options");
this.bindTo.attr("autocomplete","off");
},bindEvents: function () {
this.bindTo.on("keyup",this.testValue);
},testValue: function (event) {
let el = $(this),value = el.val();
// email has @
// remove != -1 to open earlier
if (value.indexOf("@") != -1) {
value = value.split("@")[0];
EmailDomainSuggester.addDatalist(value);
} else {
// empty list
EmailDomainSuggester.datalist.empty();
}
},addDatalist: function (value) {
let i,newOptionsString = "";
for (i = 0; i < this.domains.length; i++) {
newOptionsString += "<option value='" + value + "@" + this.domains[i] + "'>";
}
// add new ones
this.datalist.html(newOptionsString);
}
}
EmailDomainSuggester.init();
</script>
</body>
</html>
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)