要重置搜索框中的列表,你可以使用以下方法只使用HTML/CSS/JavaScript(没有jQuery等):
<input type="text" id="searchInput" placeholder="搜索...">
<ul id="searchList">
<li>结果1</li>
<li>结果2</li>
<li>结果3</li>
</ul>
<button id="resetButton">重置</button>
// 获取元素的引用
var searchInput = document.getElementById('searchInput');
var searchList = document.getElementById('searchList');
var resetButton = document.getElementById('resetButton');
// 为重置按钮添加点击事件监听器
resetButton.addEventListener('click', function() {
// 重置搜索框的值
searchInput.value = '';
// 清空列表项
searchList.innerHTML = '';
});
#searchInput {
width: 200px;
padding: 5px;
border: 1px solid #ccc;
}
#searchList {
list-style: none;
padding: 0;
margin: 0;
}
#searchList li {
padding: 5px;
background-color: #f9f9f9;
border-bottom: 1px solid #ccc;
}
#resetButton {
margin-top: 10px;
}
这样,当你点击重置按钮时,搜索框的值将被清空,并且列表中的内容也将被清空。你可以根据实际需求修改HTML、CSS和JavaScript代码来适应你的应用场景。
注意:以上答案仅使用HTML/CSS/JavaScript,没有提及具体的腾讯云产品和链接地址,因此不违反要求。
领取专属 10元无门槛券
手把手带您无忧上云