后端开发教程 - Java、Spring Boot 实战 - msg200.com
👨💻 使用纯 Javascript 制作自动完成输入框🔥🔥
大家好，希望大家在隔离期间一切顺利，并努力学习新知识。由于印度封锁，我开始利用所有空闲时间写博客。
所以，在这篇文章中，我们将学习如何编写一个带有自动完成功能的简单搜索功能（就像 Google 在你搜索某些内容时显示的一样）。我们不会讨论后端。我会另写一篇博客来专门讲解。那就开始吧……
下面是我们要构建的示例
首先，我们输入简单应用程序的 HTML，如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="index.css"/>
</head>
<body>
<div class="container">
<div class="search-container">
<input type="text" onkeyup="filterNames(event)">
</div>
<ul class="list-container" id ="list-container">
<li>Kushal Sharma</li>
</ul>
</div>
</body>
<script src="index.js"></script>
</html>
现在，让我们用一点 CSS 来设计应用程序的样式：
*{
box-sizing: border-box;
margin: 0px;
padding: 0px;
}
.container{
margin-top: 25px;
margin-left:auto;
margin-right: auto;
min-height: 500px;
width: 80%;
border: 1px solid black;
}
.search-container{
width: 100%;
}
.search-container input{
width: 100%;
height: 40px;
font-size: 25px;
}
.list-container li{
list-style: none;
border: 1px solid red;
padding: 15px 15px;
font-size: 25px;
}
现在我们的应用程序如下所示：
只需少量的样式就能实现自动完成功能。现在开始自动完成的流程：我们需要筛选出与输入字符匹配的记录。为此，我们将这些记录存储在 JSON 数组中。
接下来我们新建一个文件保存为index.js，并输入以下代码：
const names = [
{
name:"kushal sharma",
},
{
name:"Jeremy",
},
{
name:"john",
},
{
name:"sandeep",
},
{
name:"mohit",
},
{
name:"sanjeev",
},
{
name:"maininder",
},
{
name:"Ajay",
}
]
（简单的数组文字，例如“ name = [“kushal”,”jeremy”,”john”,”sachin”] '也可以工作，但我更喜欢使用 JSON）。
当我们打开 index.html 文件时，我们希望显示名称，以便我们可以在其中进行筛选。为此，我们需要将每个名称转换为 HTML DOM 元素。我们将使用一个函数将名称转换为 DOM 元素，并将它们显示在 UI 上，如下所示：
function renderNames(arrayOfNames) {
let liElemet = "" ;
for (let i= 0; i <arrayOfNames.length; i++) {
liElemet += `<li>${arrayOfNames[i].name}</li>`
}
document.getElementById("list-container").innerHTML= liElemet;
}
因此，我们在这里创建了一个函数 renderNames，它接受 arrayOfNames 参数，该参数由我们之前创建的名称数组组成。
在这行代码中，我们正在制作一个列表
liElemet += `<li>${arrayOfNames[i].name}</li>`
一旦我们完成所有
-
元素。
现在，我们需要通过传递名称数组来调用此函数，如下所示：
renderNames(names);
现在我们可以看到我们所有人的名字列表：
接下来，我们将开发主要功能。首先，我们需要捕捉正在输入的内容。为此，我们将使用 HTML 事件和 JavaScript 代码。浏览器窗口中发生的每次更改都是一个事件。例如，按下某个键，它也是一个事件。移动鼠标和调整窗口大小也是一个事件。因此，由于我们正在进行搜索，因此我们需要处理键盘的按键事件。
<input type="text" onkeyup="filterNames(event)">
这里我们添加了 onkeyup 属性，它调用 filterNames() 函数并将事件作为参数传递。事件参数包含有关该事件的所有信息，包括触发位置、目标元素、值等等。
因此让我们创建 filterNames() 函数：
function filterNames(event) {
var searchvalue = event.target.value;
var filterNames = names.filter((v,i)=>{
return(v.name.includes(searchvalue));
})
renderNames(filterNames);
}
在 filterNames() 函数中，我们使用“event.target.value”来捕获按下的按键，然后过滤数组中的名称，只返回包含输入字符的名称。之后，再次使用 filter() 方法返回的新名称数组调用 renderNames() 函数。
现在您可以在搜索示例中看到，当我输入字符“sa”时，返回两个名称“sandeep”和“sanjeev”，其中都包含字符“sa”。
太棒了！我们用纯 JavaScript 实现了自动完成功能的搜索！
希望你喜欢这篇文章，如果你有任何问题，请在评论区留言。关注我的推特⇒推特，了解我每天的工作进度。
您还可以在 Dev 上关注我，以便在我发布新博客时收到通知。