通过JavaScript实现一个搜索功能,其中包含了获取文本框输入的值、将输入值转为大写字符串、获取待搜索的菜单列表和列表项、以及遍历列表项并根据输入值进行筛选的操作写出代码
时间: 2024-05-05 09:18:47 浏览: 50
搜索功能设计java实现
4星 · 用户满意度95%
当然,我很乐意为你提供代码,以下是我的代码:
```javascript
// 获取文本框输入的值
const inputVal = document.getElementById('search-input').value;
// 将输入值转为大写字符串
const searchVal = inputVal.toUpperCase();
// 获取待搜索的菜单列表和列表项
const menuList = document.getElementById('menu-list');
const menuItems = menuList.getElementsByTagName('li');
// 遍历列表项并根据输入值进行筛选的操作
for (let i = 0; i < menuItems.length; i++) {
const menuItem = menuItems[i];
const menuItemText = menuItem.textContent.toUpperCase();
const matched = menuItemText.indexOf(searchVal) > -1;
if (matched) {
menuItem.style.display = '';
} else {
menuItem.style.display = 'none';
}
}
```
希望我的代码能够帮到你!如果还有其他的问题,欢迎继续向我提问。
阅读全文