JSuggest自动匹配下拉框使用方法(示例代码)


以下是一个使用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部分

在`

这段代码实现了基本的自动匹配下拉框功能:用户输入时,从静态数据源中过滤出匹配的建议,并显示在下拉列表中。用户可以通过点击列表中的某个建议来填充输入框,并清空建议列表。注意,这只是一个简单的示例,实际应用中可能需要从服务器动态获取数据,并可能需要更复杂的样式和布局处理。