可实现三种交互式搜索框：一、基础搜索框监听回车键触发搜索；二、带自动显隐清空按钮的搜索框；三、实时过滤列表项的搜索框。
如果您希望在网页中创建一个具有交互功能的搜索框，可以使用 HTML5 的 input type="search" 元素结合 JavaScript 实现即时响应、清空按钮、关键词高亮或回车触发等行为。以下是几种可独立使用的实现方法：
一、基础搜索框 + 回车提交事件
该方法利用原生 input[type="search"] 的语义化特性，并通过监听键盘事件捕获回车键，避免表单默认提交行为。
1、在 HTML 中添加 search 类型输入框，设置 id 便于 JS 获取：
2、在 script 标签中获取该元素并绑定 keydown 事件：
const searchInput = document.getElementById('searchInput');
立即学习“前端免费学习笔记（深入）”；
3、判断 event.key 是否为 "Enter"，若成立则执行搜索逻辑：
searchInput.addEventListener('keydown', function(e) {
if (e.key === 'Enter') {
e.preventDefault();
const keyword = this.value.trim();
if (keyword) {
console.log('搜索关键词：', keyword);
}
}
});
二、带清空按钮的搜索框（自动显示/隐藏）
HTML5 的 search 输入框支持 appearance: searchfield 渲染样式，但清空按钮需 JS 控制显隐。此方案通过监听输入内容长度动态控制按钮可见性。
1、HTML 结构中包裹 input 和 button：
2、获取两个元素并绑定 input 事件：
const input2 = document.getElementById('searchInput2');
const clearBtn = document.getElementById('clearBtn');
3、在 input 事件中根据 value 长度切换按钮显示状态：
input2.addEventListener('input', function() {
clearBtn.style.display = this.value ? 'inline-block' : 'none';
});
4、为清空按钮绑定点击事件，清空输入框并聚焦：
clearBtn.addEventListener('click', function() {
input2.value = '';
input2.focus();
this.style.display = 'none';
});
三、搜索框实时过滤列表项
该方法适用于页面存在一组预置数据（如 ul/li 列表），用户输入时动态显示匹配项，不匹配项隐藏，提升查找效率。
1、准备一个包含多个 li 的 ul 列表，每个 li 含文本内容：
- JavaScript 教程
- HTML5 入门
- CSS 布局技巧
2、获取搜索框与列表容器：
const searchInput3 = document.getElementById('searchInput3');
const list = document.getElementById('itemList');
const items = list.querySelectorAll('li');
3、监听 input 事件，将输入值转为小写用于忽略大小写匹配：
searchInput3.addEventListener('input', function() {
const term = this.value.toLowerCase().trim();
4、遍历所有 li 元素，检查其文本是否包含关键词：
items.forEach(item => {
const text = item.textContent.toLowerCase();
if (text.includes(term)) {
item.style.display = 'list-item';
} else {
item.style.display = 'none';
}
});
});
