用 data-pure-clear-button 属性最省事，但需引入对应插件且确保 jQuery 在前、插件 JS 在后；未引入插件则属性无效，这是“加了不显示”的主因。
怎么让 input 右侧自动出现「×」并清空内容
直接用 data-pure-clear-button 或 data-auto-clear-button 属性最省事，但前提是已引入对应插件（如 jquery.bootstrap-pureclearbutton.js）。它本质是监听 input 的 input 和 focus 事件，动态插入一个带 click 清空逻辑的按钮。没引入插件时加了属性也没用——这是最常见的“加了不显示”原因。
- 必须确保 jQuery 在前，插件 JS 在后；Bootstrap 4+ 的
.form-control需要配合.has-feedback容器才能正确定位图标 - 图标默认用
glyphicon-remove，若项目已弃用 Glyphicons（如 Bootstrap 5），得手动替换成 SVG 或 Font Awesome 的× - 不要在
input上直接写style="position: relative"——会干扰插件计算清除按钮的绝对定位
不用插件，纯 CSS + JS 实现 hover 显示清空按钮
核心思路是：把清除按钮和 input 放进同一个 position: relative 容器，按钮用 position: absolute; right: 8px; top: 50%; transform: translateY(-50%) 对齐。JS 只控制显隐，不操作 DOM 结构。
- 监听
input事件比keyup更可靠，能捕获粘贴、拖入、语音输入等所有值变更 - 别用
hover伪类做显隐判断——移动端没 hover，且鼠标移入时 input 可能还没值，造成按钮闪现 -
$.trim($('#list_input').val()) !== ''必须加$.trim，否则空格会误判为“有值” - 清除按钮的
z-index至少设为100，避免被下拉框、日期组件等遮挡
为什么点击「×」后 input 失去焦点？
因为清除按钮默认是 button 或 a 标签，点击会触发默认行为（如提交表单、跳转链接），导致 input 失焦甚至页面刷新。这不是 bug，是 HTML 原生行为。
- 给清除按钮加
type="button"（如果是button）或href="javascript:void(0)"（如果是a） - JS 里调用
event.preventDefault()，但更推荐前者——语义清晰且无需依赖 JS - 清空后建议主动调用
$('#list_input').focus()，保持用户操作流不中断
Bootstrap 5 下如何兼容 Font Awesome 图标
Bootstrap 5 已移除所有内置图标字体，glyphicon 彻底失效。直接用 Font Awesome 的 i 标签替换即可，但要注意尺寸和垂直居中。
- HTML 中写：
<i class="fas fa-times" id="clear-input-value"></i> - CSS 中补一句：
#clear-input-value { font-size: 0.875em; line-height: 1; }，否则图标可能比 input 高 - 别用
fa-lg这类放大类名——会破坏与 input 的高度对齐 - 如果用了 FA 的 SVG 框架（
@fortawesome/react-fontawesome等），需改用组件写法，不能直接写i标签
