如何使用纯 JavaScript 创建自动完成输入框
现在，大多数建站者都会在网站中添加表单。常见的表单元素包括文本框、数字框、下拉列表、复选框和单选按钮。
问题
我经常遇到这种情况：我们需要用户从一长串选项中进行选择。最简单的做法是将所有选项放入一个下拉选择框中。然而，这样做并不实际，因为……
- 这可能会导致非常糟糕的用户体验。
- 如果所有选项都非常庞大（例如成千上万个），那么将所有这些选项都加载到选择选项中就没有实际意义了。
解决方案
一个自动完成表单。我们可以列出一个很长的列表，然后只显示与用户相关的结果。我们不需要将所有结果都加载到 HTML 中，只需在用户输入时加载所需的结果即可。
很多提供大量选择的网站都采用这种技术，例如电子商务网站、市场平台、分类广告网站、社交媒体网站等等。
虽然看起来实现起来可能很复杂，尤其是使用像typeahead.js这样的库时，但实际上却相当简单。
实现
首先，我们的 html 元素
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
Demo auto complete
</title>
</head>
<body>
<h2>The form</h2>
<form>
<input type="text" name="name" id="name_input">Name
<br/>
<input type="submit">
</form>
</body>
</html>
要创建一个自动完成表单，我们将使用 HTML5datalist标签，所以我们将其修改成如下所示。
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
Demo auto complete
</title>
</head>
<body>
<h2>The form</h2>
<form>
<input type="text" name="name" id="name_input" list="huge_list">Name
<datalist id="huge_list">
</datalist>
<br/>
<input type="submit">
</form>
</body>
</html>
使用 AJAX 实现 Javascript 自动填充
我们将做的是，每当用户在我们的字段中输入内容时，我们都会进行检查，然后只将必要的数据填充到数据列表元素中。代码中已添加注释。
index.js
window.addEventListener("load", function(){
// Add a keyup event listener to our input element
var name_input = document.getElementById('name_input');
name_input.addEventListener("keyup", function(event){hinter(event)});
// create one global XHR object
// so we can abort old requests when a new one is make
window.hinterXHR = new XMLHttpRequest();
});
// Autocomplete for form
function hinter(event) {
// retireve the input element
var input = event.target;
// retrieve the datalist element
var huge_list = document.getElementById('huge_list');
// minimum number of characters before we start to generate suggestions
var min_characters = 0;
if (input.value.length < min_characters ) {
return;
} else {
// abort any pending requests
window.hinterXHR.abort();
window.hinterXHR.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
// We're expecting a json response so we convert it to an object
var response = JSON.parse( this.responseText );
// clear any previously loaded options in the datalist
huge_list.innerHTML = "";
response.forEach(function(item) {
// Create a new <option> element.
var option = document.createElement('option');
option.value = item;
// attach the option to the datalist element
huge_list.appendChild(option);
});
}
};
window.hinterXHR.open("GET", "/query.php?query=" + input.value, true);
window.hinterXHR.send()
}
}
服务器端将监听并返回一个 JSON 格式的值数组。以下是一个 PHP 脚本示例。
query.php
<?php
$query = $_GET['query'];
// These values may have been gotten from a database.
// We'll use a simple array just to show this example.
$values = ['Neo',
'Ibiyemi',
'Olayinka',
'Jonathan',
'Stephen',
'Fisayo',
'Gideon',
'Mezie',
'Oreoluwa',
'Jordan',
'Enkay',
'Michelle',
'Jessica'];
if ($query) {
foreach ($values as $key => $value) {
if (stripos($value, $query) === false) {
unset($values[$key]);
}
}
}
echo json_encode(array_values($values));
?>
验证
这种方法的缺点在于，没有默认的方法来确保输入的内容来自列表。为了解决这个问题，我们将为提交操作设置一个自定义函数，如果输入的值不在列表中，则阻止提交。
在
index.html
改变
<h2>The form</h2>
<form>
<input type="text" name="name" id="name_input" list="huge_list">Name
到
<h2>The form</h2>
<form onsubmit="return validateForm()">
<input type="text" name="name" id="name_input" list="huge_list">Name
在
index.js
添加
function validateForm(){
// Get the input element
var input = document.getElementById('name_input');
// Get the datalist
var huge_list = document.getElementById('huge_list');
// If we find the input inside our list, we submit the form
for (var element of huge_list.children) {
if(element.value == input.value) {
return true;
}
}
// we send an error message
alert("name input is invalid")
return false;
}
就这样！！！
现在，如果用户尝试提交无效名称，系统将显示错误消息。
文章来源：https://dev.to/stephenafamo/how-to-create-an-autocomplete-input-with-plain-javascript