自定义数据列表
引言
什么是数据列表？
DIY
结论
引言
大多数网页开发者往往并不了解所有 HTML 标签/元素，这也不能怪他们，毕竟 HTML 标签接近 100 个，要记住所有标签的功能确实很困难。因此，我们的网页应用最终大多由 div、段落、列表、span 和标题组成。但我建议我们在应用中开始使用 section 标签、article 标签和 address 标签，表单也应该开始使用fieldset、legend和datalist。这些都能帮助我们的应用更好地服务于有特殊需求的用户，而在这个时代，我们应该让所有用户都能轻松使用我们的应用。
什么是数据列表？
简单来说，数据列表（datalist）与输入元素结合使用，可以提供可搜索的下拉选项。它就像是功能更强大的选择框（select）和选项（options）元素。🤣🤣🤣
以下是数据列表的一个基本示例：
如您所见，我们有一个输入框，您可以在其中输入内容，选项会根据您的输入进行筛选。这是一个非常棒的开箱即用元素，但唯一的不足之处在于下拉菜单的样式取决于您使用的浏览器，因此在 Firefox、Edge、Opera、Chrome 等浏览器上会有所不同。这并不理想，因为大多数设计师和开发者都希望他们的应用程序/网站保持一致性。
好消息是我们可以使用 CSS 自定义数据列表，但我们需要禁用/忽略开箱即用的数据列表功能，并使用 JavaScript 重写该功能，结果如下：
那么具体该怎么做呢？其实很简单，让我来解释一下：
DIY
- 首先，我们创建一个输入标签，并为其添加 list 属性。该 list 属性将接收数据列表元素的 id。
<input autocomplete="off" list="browsers" id="input"
name="browsers" placeholder="Select your fav browser">
- 接下来，我们将创建 ID 为 browsers 的数据列表元素，并在数据列表元素内部添加一些选项元素，这样，基本的数据列表就完成了。
<datalist id="browsers">
<option value="Internet Explorer">Internet Explorer</option>
<option value="Chrome">Chrome</option>
<option value="Safari">Safari</option>
<option value="Microsoft Edge">Microsoft Edge</option>
<option value="Firefox">Firefox</option>
</datalist>
- 现在要自定义数据列表，首先我们需要禁用 OOB 数据列表，为此我们只需将空字符串传递给我们的输入列表属性即可。
<input autocomplete="off" list="" id="input"
name="browsers" placeholder="Select your fav browser">
- 现在我们将为数据列表和选项元素添加一些基本的 CSS 样式。
datalist {
position: absolute;
background-color: white;
border: 1px solid blue;
border-radius: 0 0 5px 5px;
border-top: none;
font-family: sans-serif;
width: 350px;
padding: 5px;
}
option {
background-color: white;
padding: 4px;
color: blue;
margin-bottom: 1px;
font-size: 18px;
cursor: pointer;
}
请勿参考上面的 codepen 示例中的输入元素 CSS 代码。
- 现在我们希望当焦点落在输入元素上时显示数据列表，为此我们将使用一些 Javascript 代码。
input.onfocus = function () {
browsers.style.display = 'block';
input.style.borderRadius = "5px 5px 0 0";
};
for (let option of browsers.options) {
option.onclick = function () {
input.value = option.value;
browsers.style.display = 'none';
input.style.borderRadius = "5px";
}
};
我们还会添加悬停样式，以便在鼠标悬停在任何选项上时突出显示该选项。
option:hover, .active{
background-color: lightblue;
}
我们稍后会用到主动类。
这样一来，你的数据列表就能正常工作了，用户可以通过鼠标选择任何选项，但键盘输入将无法使用。
- 接下来，我们将尝试根据输入值筛选选项。为此，我们将创建一个 oninput 触发器并获取输入值，然后将这些值与我们的选项进行匹配，并仅显示与输入值匹配的选项。
input.oninput = function() {
var text = input.value.toUpperCase();
for (let option of browsers.options) {
if(option.value.toUpperCase().indexOf(text) > -1){
option.style.display = "block";
}else{
option.style.display = "none";
}
};
}
这里我们简单地将输入值转换为大写，然后检查每个选项值是否存在对应的索引。如果存在，则显示该选项值；否则，隐藏该选项值。
- 接下来，我们将添加通过键盘上下箭头键跟踪选项并使用回车键选择任意选项的功能。为此，我们需要跟踪选项元素的当前焦点，因此我们将定义一个变量 currentFocus = -1，然后检查键盘输入键码是否为上下箭头键，并切换之前定义的激活类。
var currentFocus = -1;
input.onkeydown = function(e) {
if(e.keyCode == 40){
currentFocus++
addActive(browsers.options);
}
else if(e.keyCode == 38){
currentFocus--
addActive(browsers.options);
}
else if(e.keyCode == 13){
e.preventDefault();
if (currentFocus > -1) {
if (browsers.options)
browsers.options[currentFocus].click();
}
}
}
function addActive(x) {
if (!x) return false;
removeActive(x);
if (currentFocus >= x.length) currentFocus = 0;
if (currentFocus < 0)
currentFocus = (x.length - 1);
x[currentFocus].classList.add("active");
}
function removeActive(x) {
for (var i = 0; i < x.length; i++) {
x[i].classList.remove("active");
}
}
我们已经重新创建了默认数据列表。
结论
希望这篇文章能帮助到所有尝试使用数据列表（datalist）但因缺乏自定义支持而无法使用的用户。我希望未来的浏览器能提供更大的自定义空间，让我们无需重写 JavaScript 代码就能实现所需的功能，仅使用 CSS 就能达到理想效果。🤞🤞🤞
如果您发现任何错误或有任何改进功能的建议，请随时提出，并在下方评论区添加您的 CodePen 链接，这样我和其他人也可以尝试提升我们的技能。😃
感谢阅读。请与您的同事、开发者朋友和家人分享。