html，，，，Dropdown Search，，，，，Apple，Banana，Cherry，，，，， const searchInput = document.getElementById('searchInput');， const dropdownMenu = document.getElementById('dropdownMenu');，， searchInput.addEventListener('input', function() {， const searchValue = this.value.toUpperCase();， const options = dropdownMenu.options;， for (let i = 0; i< options.length; i++) {， if (options[i].text.toUpperCase().indexOf(searchValue) > 1) {， options[i].style.display = '';， } else {， options[i].style.display = 'none';， }， }， });，，，，``JS 纯英文下拉菜单首字母查询
一、
在网页开发中，经常会遇到需要从大量英文选项中快速查找特定内容的情况，通过实现一个具有首字母查询功能的纯英文下拉菜单，可以极大地提升用户体验和操作效率，本文将详细介绍如何使用 JavaScript 来实现这样的功能。
二、HTML 结构搭建
我们需要创建一个基本的 HTML 结构来容纳下拉菜单。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF8">
<title>English Dropdown Menu with Initial Search</title>
<style>
/* 简单的样式设置 */
.dropdown {
position: relative;
display: inlineblock;
}
.dropdowncontent {
display: none;
position: absolute;
backgroundcolor: #f9f9f9;
minwidth: 160px;
boxshadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
zindex: 1;
}
.dropdowncontent a {
color: black;
padding: 12px 16px;
textdecoration: none;
display: block;
}
.dropdowncontent a:hover {
backgroundcolor: #f1f1f1;
}
.dropdown:hover .dropdowncontent {
display: block;
}
</style>
</head>
<body>
<div class="dropdown">
<input type="text" id="searchInput" placeholder="Search by initial..." onkeyup="filterOptions()">
<div class="dropdowncontent" id="dropdownMenu">
<a href="#">Apple</a>
<a href="#">Banana</a>
<a href="#">Cherry</a>
<a href="#">Date</a>
<a href="#">Elderberry</a>
<!更多选项 >
</div>
</div>
<script src="script.js"></script>
</body>
</html>上述代码创建了一个包含输入框和下拉菜单项的基本结构，当用户在输入框中输入内容时，将触发filterOptions 函数来过滤下拉菜单中的选项。
三、JavaScript 逻辑实现
我们在script.js 文件中编写实现首字母查询功能的 JavaScript 代码。
（一）获取元素引用
我们需要获取输入框和下拉菜单元素的引用，以便后续操作。
const searchInput = document.getElementById('searchInput');
const dropdownMenu = document.getElementById('dropdownMenu');
const menuItems = dropdownMenu.getElementsByTagName('a');（二）过滤选项函数
定义filterOptions 函数，该函数将根据输入框中的值来过滤下拉菜单中的选项，如果输入框为空，则显示所有选项；否则，只显示首字母与输入值匹配的选项。
function filterOptions() {
const filter = searchInput.value.toUpperCase();
for (let i = 0; i < menuItems.length; i++) {
const itemText = menuItems[i].textContent.toUpperCase();
if (itemText.indexOf(filter) === 0) {
menuItems[i].style.display = "";
} else {
menuItems[i].style.display = "none";
}
}
}在上述代码中，我们使用toUpperCase 方法将输入值和菜单项文本转换为大写，以确保大小写不敏感的比较，通过检查菜单项文本是否以输入值为开头来决定是否显示该菜单项。
四、效果展示与测试
将上述 HTML 和 JavaScript 代码整合在一起，在浏览器中打开页面后，即可看到一个带有首字母查询功能的纯英文下拉菜单，当在输入框中输入不同的字母时，下拉菜单将仅显示首字母匹配的选项，输入“B”，则只会显示“Banana”等以“B”开头的选项。
| 输入值 | 显示的下拉菜单项 |
| A | Apple |
| B | Banana |
| C | Cherry |
| D | Date |
| E | Elderberry |
五、相关问题与解答
问题 1：如何修改代码以实现模糊查询而不是首字母查询？
答：可以将filterOptions 函数中的比较条件从itemText.indexOf(filter) === 0 修改为itemText.includes(filter)，这样，只要菜单项文本中包含输入的值，就会显示该菜单项，从而实现模糊查询功能，以下是修改后的代码片段：
function filterOptions() {
const filter = searchInput.value.toUpperCase();
for (let i = 0; i < menuItems.length; i++) {
const itemText = menuItems[i].textContent.toUpperCase();
if (itemText.includes(filter)) {
menuItems[i].style.display = "";
} else {
menuItems[i].style.display = "none";
}
}
}问题 2：如果想要限制输入框只能输入单个字母，该如何修改代码？
答：可以在filterOptions 函数中添加对输入值长度的判断，如果输入值的长度大于 1，则清空输入框并提示用户只能输入单个字母，以下是修改后的代码片段：
function filterOptions() {
const filter = searchInput.value.toUpperCase();
if (filter.length > 1) {
alert("Please enter only one letter.");
searchInput.value = "";
return;
}
for (let i = 0; i < menuItems.length; i++) {
const itemText = menuItems[i].textContent.toUpperCase();
if (itemText.indexOf(filter) === 0) {
menuItems[i].style.display = "";
} else {
menuItems[i].style.display = "none";
}
}
}通过以上修改，当用户输入多个字母时，会弹出提示框并清空输入框，确保只能进行单个字母的查询。