如何用jQuery在grid.js搜索框placeholder中添加放大镜图标？

你原来的代码行不通，因为placeholder属性只支持纯文本，HTML标签会被当作普通字符显示，不会被渲染成图标。给你两种可行方案：

方案一：CSS伪元素定位（推荐） #

这是最稳定的实现方式，通过CSS把图标放在输入框内部，不依赖placeholder：

/* 给搜索框容器加相对定位 */
.gridjs-search {
  position: relative;
}

/* 用伪元素添加放大镜图标 */
.gridjs-search::before {
  content: "\F3EB"; /* 对应mdi-magnify的Unicode编码，确保已加载Material Design Icons字体 */
  font-family: "Material Design Icons";
  position: absolute;
  left: 12px; /* 调整图标和输入框左边的距离 */
  top: 50%;
  transform: translateY(-50%); /* 垂直居中 */
  color: #999; /* 图标颜色，和placeholder保持一致 */
}

/* 给输入框左边留空间，避免文字被图标挡住 */
.gridjs-search-input {
  padding-left: 36px;
}

方案二：用Unicode字符作为placeholder内容 #

如果想直接在placeholder里显示图标，用放大镜的Unicode字符（或MDI字体对应的Unicode）代替HTML标签：

// 用通用放大镜Unicode字符
$('.gridjs-head .gridjs-search .gridjs-search-input').attr("placeholder", "🔍 搜索...");

// 或者用MDI字体的mdi-magnify对应的Unicode（需确保MDI字体已加载）
$('.gridjs-head .gridjs-search .gridjs-search-input').attr("placeholder", "\uF3EB 搜索...");

注意：第二种方案可能存在字体兼容性问题，如果用户设备没对应字体，图标会显示乱码，优先选第一种CSS方案。

内容的提问来源于stack exchange，提问作者Shaheem PP