一、自动填充
自动填充功能能够让用户在输入框中输入文字时，系统根据用户输入的内容自动推荐相关的词汇。这样不仅可以让用户输入更加快捷，还可以减少输入错误的概率，提高输入框的输入体验。要实现自动填充功能，我们可以使用 中的autocomplete属性和JavaScript技术来实现。
<input type="text" id="input-box" autocomplete="on">
<script>
var inputBox = document.getElementById("input-box");
var dataList = ["Apple", "Banana", "Cherry", "Durian", "Eggplant", "Fig"];
inputBox.addEventListener("input", function() {
var inputVal = this.value;
var suggestList = [];
for (var i = 0; i < dataList.length; i++) {
if (dataList[i].indexOf(inputVal) != -1) {
suggestList.push(dataList[i]);
}
}
if (suggestList.length > 0) {
var suggestHtml = "<ul>";
for (var i = 0; i < suggestList.length; i++) {
suggestHtml += "<li>" + suggestList[i] + "</li>";
}
suggestHtml += "</ul>";
document.getElementById("suggest-area").innerHTML = suggestHtml;
} else {
document.getElementById("suggest-area").innerHTML = "";
}
});
</script>
二、联想输入
联想输入是指在用户输入文字时，系统通过自动搜索推荐相关的词汇。相对于自动填充，联想输入的搜索范围更广，更加智能。实现联想输入需要使用到JavaScript和后台的接口技术。在后台，可以通过Ajax技术与服务器交互，从而实现联想搜索。在前端，我们可以使用 中的oninput事件来接收用户输入，并通过XMLHttpRequest对象与后台接口进行交互。
<input type="text" id="input-box">
<script>
var inputBox = document.getElementById("input-box");
inputBox.addEventListener("input", function() {
var xhr = new XMLHttpRequest();
xhr.open("GET", "/search?q=" + this.value, true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
var resultList = JSON.parse(xhr.responseText);
var resultHtml = "<ul id='result-list'>";
for (var i = 0; i < resultList.length; i++) {
resultHtml += "<li>" + resultList[i] + "</li>";
}
resultHtml += "</ul>";
document.getElementById("result-area").innerHTML = resultHtml;
}
};
xhr.send();
});
</script>
三、输入验证
输入验证是指在用户输入文字后，系统会对输入的内容进行自动验证，从而提高输入框的输入体验。比如，输入框中只能输入数字、字母或符号等。我们可以使用输入框自带的pattern属性，或者使用JavaScript进行验证输入内容的合法性。
<input type="text" id="input-box" pattern="[A-Za-z0-9]+">
<script>
var inputBox = document.getElementById("input-box");
inputBox.addEventListener("input", function() {
var inputVal = this.value;
if (/^[A-Za-z0-9]+$/.test(inputVal)) {
this.style.borderColor = "green";
} else {
this.style.borderColor = "red";
}
});
</script>
原创文章，作者：ESMF，如若转载，请注明出处：https://www.506064.com/n/143106.html
微信扫一扫 
支付宝扫一扫 