使用 JavaScript 实现自动完成功能
让我们创建一个自动完成功能，以便点击输入框时显示建议列表。
代码
首先我们来创建界面，我们先用 HTML 做一些简单的东西。
<div>
<label for="input">Input</label>
<input type="text" id="input" />
<ul id="suggestions"></ul>
</div>
我们有一个div元素，里面包含一个label标签、一个input输入框和一个ul元素。input输入框用于输入信息，当输入的信息与列表中的匹配项匹配时，就会显示在ul元素中。
(function () {
"use strict";
let inputField = document.getElementById('input');
let ulField = document.getElementById('suggestions');
inputField.addEventListener('input', changeAutoComplete);
ulField.addEventListener('click', selectItem);
function changeAutoComplete({ target }) {
let data = target.value;
ulField.innerHTML = ``;
if (data.length) {
let autoCompleteValues = autoComplete(data);
autoCompleteValues.forEach(value => { addItem(value); });
}
}
function autoComplete(inputValue) {
let destination = ["Italy", "Spain", "Portugal", "Brazil"];
return destination.filter(
(value) => value.toLowerCase().includes(inputValue.toLowerCase())
);
}
function addItem(value) {
ulField.innerHTML = ulField.innerHTML + `<li>${value}</li>`;
}
function selectItem({ target }) {
if (target.tagName === 'LI') {
inputField.value = target.textContent;
ulField.innerHTML = ``;
}
}
})();
我们有四个功能：
- changeAutoComplete = 在此函数中，我们将获得输入值，我们检查是否有任何文本，我们调用自动完成函数，使用自动完成函数的返回值进行循环，并使用 additem() 函数添加项目；
- autoComplete = 在这个函数中，我们有一个目标数组，并使用传递的数据检查输入的文本是否存在于目标数组的某个值中，如果存在则返回该值；
- addItem = 此处将接收到的值直接添加到 ul；
- selectItem = 通过点击项目列表激活此功能，从而直接选择选定的项目；
就这么简单。
演示
完整的项目工作内容如下所示。
YouTube
如果您更喜欢观看视频，请在 YouTube 上观看相关内容。
参考：
感谢阅读！
如果您有任何问题、投诉或建议，都可以在评论区留言。我很乐意解答！
😊😊 回头见！😊😊
支持我
YouTube - WalterNascimentoBarroso
Github - WalterNascimentoBarroso
Codepen - WalterNascimentoBarroso
LinkedIn - WalterNascimentoBarroso