答案：通过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 控制逻辑，结构清晰且易于扩展。
