📌  相关文章
📜  html 自动完成下拉列表 - Html (1)

📅  最后修改于: 2023-12-03 15:15:42.081000             🧑  作者: Mango

HTML自动完成下拉列表

自动完成下拉列表是一种常见的Web应用程序技术，它可以在用户输入时显示可能的选项，同时减少用户的输入量。本文将介绍如何在HTML中创建自动完成下拉列表。

实现方法

实现自动完成下拉列表的方法很多，但在此我们将介绍使用HTML和JavaScript的方法。

首先，我们需要创建一个输入框和下拉列表：

<input type="text" id="myInput" placeholder="输入内容">
<div id="myList"></div>

然后我们需要编写JavaScript代码，以便在文本框中输入内容时自动生成匹配项的下拉列表。我们可以使用onkeyup事件监听输入框中的文本变化，并在变化时调用showList函数：

document.getElementById("myInput").addEventListener("keyup", function(){
    showList();
});

showList函数首先获取输入框中的文本，然后从服务器或本地JSON文件中获取匹配项的列表。在此我们将假设我们已经获取到了一个名为jsonList的包含匹配项的数组。然后我们将创建一个HTML列表元素，并为其添加匹配项：

function showList() {
    var input, filter, ul, li, a, i;
    input = document.getElementById("myInput");
    filter = input.value.toUpperCase();
    ul = document.getElementById("myList");
    ul.innerHTML = "";
    for (i = 0; i < jsonList.length; i++) {
        if (jsonList[i].toUpperCase().indexOf(filter) > -1) {
            li = document.createElement("li");
            a = document.createElement("a");
            a.innerHTML = jsonList[i];
            li.appendChild(a);
            ul.appendChild(li);
        }
    }
}

最后，我们需要使用CSS来样式化我们的下拉列表。具体实现方法可以根据应用程序的要求进行更改。

完整代码
<!DOCTYPE html>
<html>
<head>
<style>
#myInput {
  box-sizing: border-box;
  background-image: url('searchicon.png');
  background-position: 14px 12px;
  background-repeat: no-repeat;
  font-size: 16px;
  padding: 14px 20px 12px 45px;
  border: none;
  border-bottom: 1px solid #ddd;
}

#myList {
  list-style-type: none;
  padding: 0;
  margin: 0;
  position: absolute;
  z-index: 1;
}

#myList li a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

#myList li a:hover:not(.header) {
  background-color: #ddd;
}
</style>
</head>
<body>

<h2>自动完成下拉列表</h2>

<input type="text" id="myInput" placeholder="输入内容">

<div id="myList"></div>

<script>
var jsonList = ["苹果", "香蕉", "樱桃", "葡萄", "芒果", "橙子", "草莓", "西瓜"];
document.getElementById("myInput").addEventListener("keyup", function(){
    showList();
});

function showList() {
    var input, filter, ul, li, a, i;
    input = document.getElementById("myInput");
    filter = input.value.toUpperCase();
    ul = document.getElementById("myList");
    ul.innerHTML = "";
    for (i = 0; i < jsonList.length; i++) {
        if (jsonList[i].toUpperCase().indexOf(filter) > -1) {
            li = document.createElement("li");
            a = document.createElement("a");
            a.innerHTML = jsonList[i];
            li.appendChild(a);
            ul.appendChild(li);
        }
    }
}
</script>

</body>
</html>