本文详细讲解如何使用HTML5、CSS3 Flex布局以及原生JavaScript实现一个自动完成的搜索框。通过Flex简化界面布局，利用onkeyup事件监听用户输入，并结合本地数据模拟后台查询，实现关键词匹配与列表展示，最终完成点击回填与列表隐藏交互。
自动完成搜索框概述
在许多提供搜索功能的网站中，自动完成的搜索框已成为标准配置。它旨在帮助用户快速定位并输入他们想要搜索的关键词，从而提升用户体验，使其能更高效地获取所需结果。这种交互方式友好且实用，因此被广泛推荐和使用。
界面设计与Flex布局实现
接下来我们将分两部分来讲解这一效果的实现，首先从界面设计与布局开始。
界面的HTML结构主要包含两个核心元素：一个是用于输入关键词的搜索框，另一个是触发搜索操作的点击按钮。
<div class="search">
<input type="text" value="">
<button>搜索</button>
</div>这是最基础的搜索框设计。关于CSS处理，传统做法常使用float属性并配合边框和内边距设置，同时去除按钮边框并添加背景色。这里我们采用Flex布局方式，这样不仅操作更简便，还无需处理清除浮动的问题，当然需要关注浏览器的兼容性问题。
.search {
display: inline-flex;
height: 35px;
margin: 50px auto;
position: relative;
}
.search input {
border: #eee 1px solid;
background-color: #fff;
outline: none;
width: 200px;
padding: 0 5px;
}
.search button {
background-color: #ff3300;
color: #fff;
border: none;
width: 80px;
}
接下来考虑交互逻辑：当用户输入关键词时，系统需显示一个包含相关建议词的列表。为此，我们需要在界面中加入一个词语列表元素。例如：
<ul>
<li><a href="#">武林外传</a> </li>
<li><a href="#">葵花宝典</a> </li>
<li><a href="#">如来佛掌</a> </li>
<li><a href="#">九阴白骨爪</a> </li>
</ul>将上述代码追加到.search容器的内容之后，并设置相应的CSS样式。我们将该列表的最小宽度设置为.search容器宽度减去搜索按钮的宽度，从而确保其宽度与搜索框保持一致。
.search ul {
position: absolute;
left: 0;
top: 35px;
border: #eee 1px solid;
min-width: calc(100% - 80px);
text-align: left;
}
.search ul a {
display: block;
padding: 5px;
}
在编写具体样式前，需先清除浏览器默认的一些样式。最终呈现的效果如下。
JavaScript交互逻辑与代码实现
接下来我们编写 JavaScript 代码进行控制。 分析其中的事件：当用户在输入框中输入文字后，将输入的文字与后台数据进行查询，查询到结果后返回给客户端，然后将返回的数据显示在数据列表下方。
我们分析其中的事件流程：当用户在输入框中输入文字后，程序将获取该输入内容并与后台数据进行查询匹配，查询结果返回客户端后，需将数据显示在数据列表中。
var ele_key = document.getElementById("key");
ele_key.onkeyup = function (e) {
//处理事件
}
根据上述步骤，首先获取输入框的DOM元素，并为其添加onkeyup事件监听器。
var data = ["编程的人", "武林外传", "葵花宝典", "九阴白骨爪", "武林江湖", "will"];此处我们模拟一组后台数据，以数组形式表示，并添加若干示例数据。
//定义一些数据
var data = ["编程的人", "武林外传", "葵花宝典", "九阴白骨爪", "武林江湖", "will"];
var ele_key = document.getElementById("key");
ele_key.onkeyup = function (e) {
var val = this.value;
//获取输入框里匹配的数据
var srdata = [];
for (var i = 0; i < data.length; i++) {
console.log(data[i].indexOf(val))
if (val.trim().length > 0 && data[i].indexOf(val) > -1) {
srdata.push(data[i]);
}
}
}
现在后台数据已就绪，事件监听也已添加，接下来对数据进行逻辑处理。首先获取用户输入的数据，然后与后台数据进行比对，将匹配后的数据保存到一个新的数组中。
//定义一些数据
var data = ["编程的人", "武林外传", "葵花宝典", "九阴白骨爪", "武林江湖", "will"];
var ele_key = document.getElementById("key");
ele_key.onkeyup = function (e) {
var val = this.value;
//获取输入框里匹配的数据
var srdata = [];
for (var i = 0; i < data.length; i++) {
console.log(data[i].indexOf(val))
if (val.trim().length > 0 && data[i].indexOf(val) > -1) {
srdata.push(data[i]);
}
}
//获取到的数据准备追加显示, 前期要做的事情: 清空数据,然后显示数据列表,如果获取到的数据为空,则不显示
var ele_datalist = document.getElementById("datalist");
ele_datalist.style.visibility = "visible";
ele_datalist.innerHTML = "";
if (srdata.length == 0) {
ele_datalist.style.visibility = "hidden";
}
//将搜索到的数据追加到显示数据列表, 然后每一行加入点击事件, 点击后将数据放入搜索框内, 数据列表隐藏
var self = this;
for (var i = 0; i < srdata.length; i++) {
var ele_li = document.createElement("li");
var ele_a = document.createElement("a");
ele_a.setAttribute("href", "javascript:;");
ele_a.textContent = srdata[i];
ele_a.onclick = function () {
self.value = this.textContent;
ele_datalist.style.visibility = "hidden";
}
ele_li.appendChild(ele_a);
ele_datalist.appendChild(ele_li);
}
}
继续深入分析，在获取到后台查询到的匹配数据后，需要将这些数据显示给用户。我们将这些数据渲染到数据列表中。
在将数据添加到列表项时，首先对数据列表进行初始化处理，以避免重复数据的添加。其次，为数据列表中的每一行添加点击事件，点击后将选中的数据填入搜索框，并隐藏数据列表。
由于录制软件的原因，搜索框边框颜色可能与录制背景色相近，导致视觉上边框似乎消失（⊙﹏⊙）b。以上就是利用JavaScript实现搜索框自动完成效果的完整过程，大家可以自行测试体验！