以下是一个使用JavaScript和HTML简单实现自动匹配下拉框(也称为自动完成或自动建议)的示例代码。这里不依赖于特定库(如jQuery UI的Autocomplete),而是使用原生JavaScript和HTML来演示基本原理。
### HTML部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自动匹配下拉框示例</title>
<style>
.suggestions {
list-style-type: none;
padding: 0;
margin: 0;
position: absolute;
z-index: 1;
background-color: #f9f9f9;
border: 1px solid #d4d4d4;
max-height: 200px;
overflow-y: auto;
}
.suggestions li {
padding: 8px;
cursor: pointer;
}
.suggestions li:hover {
background-color: #e9e9e9;
}
</style>
</head>
<body>
<input type="text" id="searchInput" placeholder="输入搜索内容..." />
<ul id="suggestions" class="suggestions"></ul>
<script>
// JavaScript代码将放在这里
</script>
</body>
</html>
### JavaScript部分
在`
这段代码实现了基本的自动匹配下拉框功能:用户输入时,从静态数据源中过滤出匹配的建议,并显示在下拉列表中。用户可以通过点击列表中的某个建议来填充输入框,并清空建议列表。注意,这只是一个简单的示例,实际应用中可能需要从服务器动态获取数据,并可能需要更复杂的样式和布局处理。