HTML无法实现图标搜索，需JavaScript动态过滤渲染：监听input事件，用Array.filter()和String.includes()匹配图标名，避免DOM频繁重绘，推荐CSS类或SVG sprite，自定义图标须注册到Font Awesome库。
怎么用 HTML + JavaScript 实现图标搜索框
纯 HTML 无法实现图标搜索功能，必须配合 JavaScript 动态过滤和渲染。核心逻辑是：把图标数据（通常是 icon name 和 svg 或 class）存成数组，监听输入框 input 事件，实时比对 icon.name.toLowerCase() 是否包含关键词。
常见错误是直接操作 DOM 插入大量 svg 标签导致卡顿——应优先用 CSS class（如 Font Awesome）或预加载 SVG sprite，搜索时只切换显示/隐藏。
- 推荐用
Array.filter()+String.includes()做基础匹配，不建议一上来就上正则 - 搜索前对关键词
trim()并忽略空字符串，避免清空输入后仍显示全部图标引发误点 - 若图标来自 CDN（如
https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.0/svg/icons.svg），不要在搜索时重复请求，而是提前加载并缓存SVGElement
Font Awesome 的 icon 搜索为什么搜不到自定义图标
因为 Font Awesome 官方 JS（@fortawesome/fontawesome-svg-core）默认只注册它自己包里的 icon，你手动加的 <svg></svg> 或自定义 icon definition 不在它的 library 中，fa-search 组件自然查不到。
解决方式不是改它的搜索逻辑，而是把你自己的图标也注册进去：
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
import { library } from '@fortawesome/fontawesome-svg-core';
import { faHome } from '@fortawesome/free-solid-svg-icons';
// 注册你自己的图标对象（必须含 icon、prefix、iconName）
library.add({
prefix: 'custom',
iconName: 'my-icon',
icon: [24, 24, [], 'f123', '...'] // SVG path 数据
});
- 注册后，可用
library.allIcons查看当前所有可搜图标（含自定义） - 注意
iconName必须是合法标识符（不能含短横线、空格），否则搜索时toLowerCase()匹配失败 - 如果用的是 Font Awesome 5 的旧版 CDN 方式，需改用
FontAwesomeConfig.searchPseudoElements = true并确保:before内容可被 JS 读取——这很不可靠，建议升级到 v6 + ES module 方式
搜索结果点击后如何插入到编辑器里
用户点图标，本质是往目标区域（比如 contenteditable 元素或 textarea）插入一段 HTML 或 Unicode 字符。难点在于光标位置保持和多行兼容。
对 contenteditable：必须用 document.execCommand('insertHTML', false, '<i class="fas fa-home"></i>')（已废弃但仍是唯一可靠方案），或更稳妥地手动操作 Range 和 Selection。
- 用
textarea时，不能直接插 HTML，得转成 emoji 或占位符（如:home:），再由后续解析器替换 - 插入前务必调用
getSelection().getRangeAt(0)获取当前光标位置，否则总插在开头 - 插入后主动触发
input事件（el.dispatchEvent(new Event('input', { bubbles: true }))），让 Vue/React 等框架能响应变化
为什么搜索慢、卡顿，甚至页面假死
典型原因是图标数据量大（比如 500+ 个）且每次输入都做全量 DOM 重绘。不是 JS 慢，是浏览器 Layout + Paint 压力大。
优化关键在「懒渲染」和「节流」：
- 用
requestIdleCallback()延迟非紧急渲染，或至少加setTimeout(..., 0)让出主线程 - 搜索框加
debounce（300ms），避免用户连打时频繁执行过滤 - 不要每次搜索都
innerHTML = ''再拼接；改用DocumentFragment批量创建节点，最后一次性 append - 图标列表容器设
height+overflow-y: auto，禁用scroll-behavior: smooth，防止滚动动画加剧卡顿
最常被忽略的一点：没给图标元素加 key 或唯一 data-id，导致 Vue/React 列表更新时复用错节点，视觉错乱还难调试。
