答案：通过 html 结构、css样式和 javaScript 交互实现搜索框输入提示效果。.search-container 设置相对定位，.search-input 定义输入框样式，.suggestions 使用 绝对定位 浮于上方，圆角边框阴影提升视觉效果，js监听输入动态过滤数据并展示匹配项，点击或键盘操作可选中，提升可用性。
制作一个美观实用的搜索框输入提示（Autocomplete Suggestions）效果，可以通过 HTML + CSS 实现基础样式，再配合 javascript 动态控制显示内容。以下是一个简洁、可复用的 CSS 样式方案。
1. 基础 HTML 结构
使用一个容器包裹输入框和提示列表：
<div class="search-container"> <input type="text" class="search-input" placeholder=" 搜索……"> <ul class="suggestions"> <li>苹果</li> <li> 香蕉 </li> <li> 橙子 </li> </ul> </div>2. 核心 CSS 样式
为输入框和提示列表设置样式，确保提示层浮在上方、有圆角、阴影和悬停效果：
立即学习 “ 前端免费学习笔记（深入）”；
.search-container {position: relative; width: 300px;} <p>.search-input {width: 100%; padding: 10px; font-size: 16px; border: 1px solid #ccc; border-radius: 6px; outline: none;}</p><p>.suggestions {position: absolute; top: 100%; left: 0; right: 0; margin: 0; padding: 0; list-style: none; background: #fff; border: 1px solid #ddd; border-top: none; border-radius: 0 0 6px 6px; max-height: 200px; overflow-y: auto; box-shadow: 0 4px 6px rgba(0,0,0,0.1); z-index: 1000; display: none; /<em> 默认隐藏 </em>/ }</p><p>.suggestions.show {display: block; /<em> 显示时激活 </em>/}</p><p>.suggestions li {padding: 10px; cursor: pointer; transition: background-color 0.2s;}</p><p>.suggestions li:hover, .suggestions li.selected {background-color: #f0f0f0;}</p>3. 显示 / 隐藏提示的简单 JS 控制
虽然重点是 CSS，但简单 JS 可让提示出现更自然：
立即学习 “ 前端免费学习笔记（深入）”；
const input = document.querySelector('.search-input'); const suggestions = document.querySelector('.suggestions'); <p>// 模拟数据 const data = ['苹果', '香蕉', '橙子', '葡萄', '草莓'];</p><p>input.addEventListener('input', function() {const value = this.value.trim().toLowerCase(); suggestions.innerHTML = '';</p><p>if (value) {const filtered = data.filter(item => item.toLowerCase().includes(value)); filtered.forEach(item => { const li = document.createElement('li'); li.textContent = item; suggestions.appendChild(li); }); suggestions.classlist.add('show'); } else {suggestions.classList.remove('show'); } });</p><p>// 点击选项填充输入框 suggestions.addEventListener('click', function(e) {if (e.target.tagName ==='LI') {input.value = e.target.textContent; suggestions.classList.remove('show'); } });</p>4. 可用性优化建议
提升用户体验的小细节：
- 用键盘上下键可切换高亮项，回车确认选择
- 点击外部区域自动收起提示列表
- 无匹配时显示“无结果”提示项
- 避免提示遮挡输入框内容
基本上就这些。CSS 负责视觉呈现，JS 控制逻辑，结构清晰且易于扩展。
