为上面的代码添加一个搜索栏
要在上面的代码中添加一个搜索栏，可以使用HTML的<input>元素来创建一个文本输入框。代码示例如下：
<!DOCTYPE html>
<html>
<head>
<title>搜索栏示例</title>
</head>
<body>
<form>
<input type="text" id="search" name="search" placeholder="在此输入搜索内容">
<button type="submit">搜索</button>
</form>
<ul id="result"></ul>
<script>
const form = document.querySelector('form');
const searchInput = document.getElementById('search');
const resultList = document.getElementById('result');
form.addEventListener('submit', (e) => {
e.preventDefault();
const searchTerm = searchInput.value;
// 在这里执行搜索逻辑，将结果显示在列表中
resultList.innerHTML = `<li>搜索结果：${searchTerm}</li>`;
});
</script>
</body>
</html>
上述代码中，<input>元素的type属性设置为text，表示创建一个文本输入框。id属性设置为search，以便通过JavaScript获取该元素。name属性设置为search，以便在提交表单时将输入的搜索内容作为参数传递。placeholder属性设置为在此输入搜索内容，用于显示在输入框内的提示文本。
通过JavaScript监听表单的submit事件，当用户点击搜索按钮或按下回车键时，会执行回调函数。在回调函数中，通过searchInput.value获取用户输入的搜索内容，并将结果显示在resultList元素中的列表项中
原文地址: http://www.cveoy.top/t/topic/iRLH 著作权归作者所有。请勿转载和采集!