17370845950

可实现三种交互式搜索框：一、基础搜索框监听回车键触发搜索；二、带自动显隐清空按钮的搜索框；三、实时过滤列表项的搜索框。

如果您希望在网页中创建一个具有交互功能的搜索框，可以使用 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';
    }
  });
});