如何在开启多选的selectize组件最左侧添加fontawesome或bootstrap搜索图标

实现步骤 #

1. 新增自定义CSS样式 #

将以下代码加入你的样式文件中，即可实现左侧固定搜索图标：

/* 给多选模式下的selectize输入框设置相对定位，作为图标定位父容器 */
.selectize-control.multi .selectize-input {
    position: relative;
    padding-left: 32px; /* 预留图标显示空间，可根据实际需求调整数值 */
}

/* FontAwesome 5 搜索图标样式 */
.selectize-control.multi .selectize-input::before {
    content: "\f002";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #999;
    font-size: 14px;
}

/* 若使用Bootstrap Glyphicons，替换上面的::before规则为以下代码即可
.selectize-control.multi .selectize-input::before {
    content: "\e003";
    font-family: "Glyphicons Halflings";
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #999;
    font-size: 14px;
}
*/

2. 原有业务逻辑无需修改 #

你现有HTML引用、selectize初始化JS代码都可以直接保留，不需要额外调整，新增样式会自动适配多选模式的组件。 #

效果参考 #

内容的提问来源于stack exchange，提问作者Ujjawal Bhandari