html5怎么实现实时搜索提示_html5input事件与下拉提示【指南】

1、在 HTML 中输入框后添加一个空 div，并设置 id="suggestionList"。

2、为该 div 设置 CSS 样式：position 为 absolute 或 relative，width 与输入框一致，background 为白色，border 为 1px solid #ccc，z-index 高于其他元素。

3、初始状态下设置该 div 的 style.display = 'none';，避免页面加载时意外显示。

4、在 handleSearch 函数中，当 query 长度大于 0 时调用 suggestionList.style.display = 'block'; 显示容器。

三、利用数组过滤生成匹配建议

将预设的关键词列表或从接口获取的数据源进行字符串前缀匹配，筛选出符合条件的建议项，提升响应准确性与相关性。

1、准备候选词数组：const candidates = ['HTML5', 'HTML5 Canvas', 'HTML5 Form', 'CSS3', 'JavaScript'];。

2、在 handleSearch 函数内执行过滤：const matches = candidates.filter(item => item.toLowerCase().startsWith(query.toLowerCase()));。

3、若 matches 为空，则清空下拉容器并隐藏：suggestionList.innerHTML = ''; suggestionList.style.display = 'none';。

4、否则遍历 matches 构建 li 元素并插入到 suggestionList 中：matches.forEach(item => { const li = document.createElement('li'); li.textContent = item; suggestionList.appendChild(li); });。

四、添加点击选中功能并填充输入框

用户点击某条提示项时，应自动将该项文本填入输入框，并关闭下拉提示，完成一次闭环交互。

1、为 suggestionList 绑定事件委托：suggestionList.addEventListener('click', event => { if (event.target.tagName === 'LI') { input.value = event.target.textContent; suggestionList.innerHTML = ''; suggestionList.style.display = 'none'; } });。

2、确保点击发生时仅响应 li 元素，避免误触容器空白区域。

3、在填充 input.value 后，手动触发 input 事件以通知其他监听逻辑：input.dispatchEvent(new Event('input', { bubbles: true }));。

4、为提升体验，可在点击后将焦点保留在输入框：input.focus();。

五、优化键盘导航支持（上下键切换选项）

允许用户通过键盘方向键浏览提示项，并按回车确认选择，增强无障碍访问能力与操作效率。

1、声明一个全局变量 let selectedIndex = -1; 记录当前高亮项索引。

2、为 input 元素绑定 keydown 事件，监听 ArrowUp 和 ArrowDown 键：input.addEventListener('keydown', handleKeyDown);。

3、在 handleKeyDown 中判断按键类型，更新 selectedIndex 并高亮对应 li 元素：if (event.key === 'ArrowDown') { selectedIndex = Math.min(selectedIndex + 1, matches.length - 1); }。

4、监听 Enter 键时，若 selectedIndex >= 0，则将对应项赋值给 input.value，并清空下拉列表：input.value = matches[selectedIndex]; suggestionList.innerHTML = ''; suggestionList.style.display = 'none';。