通过JavaScript实现一个搜索功能,其中包含了获取文本框输入的值、将输入值转为大写字符串、获取待搜索的菜单列表和列表项、以及遍历列表项并根据输入值进行筛选的操作写出代码
时间: 2024-05-05 09:18:47 浏览: 6
当然,我很乐意为你提供代码,以下是我的代码:
```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';
}
}
```
希望我的代码能够帮到你!如果还有其他的问题,欢迎继续向我提问。
相关问题
通过钩子方法将第一个文本框中输入的值同步显示在第二个文本框 实现
您可以使用以下的 HTML 和 JavaScript 代码来实现这个功能:
```html
<!DOCTYPE html>
<html>
<head>
<title>同步文本框</title>
</head>
<body>
<label for="text1">输入文本:</label>
<input type="text" id="text1" onkeyup="syncTextBox()"><br><br>
<label for="text2">同步文本:</label>
<input type="text" id="text2"><br><br>
<script>
function syncTextBox() {
// 获取第一个文本框中的值
var textValue = document.getElementById("text1").value;
// 将值同步显示到第二个文本框
document.getElementById("text2").value = textValue;
}
</script>
</body>
</html>
```
这段代码中,我们首先定义了两个文本框,一个用于输入文本,另一个用于同步文本。在第一个文本框中输入文本时,会触发 `onkeyup` 事件并调用 `syncTextBox` 函数。该函数会获取第一个文本框中的值,并将其同步显示到第二个文本框。
js获取文本框输入的值
要通过JavaScript获取文本框输入的值,可以使用getElementById()、getElementsByName()或getElementsByTagName()方法。
如果你的文本框有一个唯一的id属性,你可以使用getElementById()方法来获取它的值。例如,通过以下代码可以获取id为"inputValueID"的文本框的值:
var value = document.getElementById("inputValueID").value;
如果你的文本框有一个name属性,你可以使用getElementsByName()方法来获取它的值。例如,通过以下代码可以获取name为"inputValueID"的文本框的值:
var value = document.getElementsByName("inputValueID")\[0\].value;
如果你想获取所有文本框的值,可以使用getElementsByTagName()方法。例如,通过以下代码可以获取所有input元素的值:
var inputs = document.getElementsByTagName("input");
var values = \[\];
for (var i = 0; i < inputs.length; i++) {
values.push(inputs\[i\].value);
}
请注意,getElementsByName()和getElementsByTagName()方法返回的是一个元素列表,所以需要通过索引来获取具体的元素值。而getElementById()方法返回的是一个具体的元素,所以可以直接获取其值。
希望这个回答对你有帮助!
#### 引用[.reference_title]
- *1* *2* *3* [通过js获得input文本框输入的值](https://blog.csdn.net/qq_41153943/article/details/100154376)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]