原生 select 无法支持通讯录索引，因其无自定义滚动、字母锚点和侧边栏能力；Layui 的 select 封装亦不支持，需改用 dropdown + 自定义 HTML 实现分组列表与右侧索引栏，并手动处理滚动定位与选中逻辑。
为什么原生 select 无法直接支持通讯录索引
Layui 的 select 是基于原生 <select> 封装的，不支持自定义滚动、字母锚点、固定侧边栏等交互；它的下拉菜单是纯 DOM 渲染，没有虚拟滚动或索引定位能力。你看到的“通讯录式索引”（如点击右侧 A-Z 快速跳转到对应首字母分组）必须脱离原生 select 实现。
用 layui.dropdown + 自定义 HTML 模拟索引下拉
这是最可控、兼容性好且不破坏 Layui 风格的做法：放弃 select，改用 dropdown 触发自定义弹层，内部用 dl/dt/dd 或 ul/li 构建带分组和索引的列表。
实操建议：
- 用
layui.dropdown.render()绑定触发元素（如一个带icon的按钮），content传入含分组的 HTML 字符串或 DOM - 分组结构示例：
<dt>A</dt><dd data-value="apple">Apple</dd><dd data-value="avocado">Avocado</dd> - 右侧索引栏用绝对定位的
<div class="index-bar"><span>A</span><span>B</span></div>，绑定click后调用element.scrollIntoView()定位到对应<dt> - 选中后用
dropdown.hide()关闭，并手动更新绑定的隐藏input值（Layui 表单校验依赖它）
若坚持用 select，只能做简化版首字母筛选
在 Layui 的 select 上加搜索框（非官方支持，需手动注入），通过监听输入实时过滤 option 显示状态 —— 这不是索引，但能解决“找某个字开头”的核心痛点。
关键点：
- 给
select外层容器加class="layui-form-select"后，用$('.layui-form-select').append('<input type="text" placeholder="搜索..." class="index-search">') - 监听
input事件，遍历所有option，用text().charAt(0).toUpperCase() === keyword.toUpperCase()匹配首字母 - 注意：Layui 会重绘
dl，所以过滤逻辑要放在layui.form.on('select(...)', ...)之外，且每次触发前先layui.form.render('select') - 性能提示：选项超过 200 条时，DOM 频繁显示/隐藏会卡顿，建议改用虚拟列表方案
移动端真索引体验的关键细节
手机上用户习惯滑动侧边索引栏并悬停，这需要处理 touchstart/touchmove/touchend，而非仅 click；同时要防默认滚动穿透、避免触发页面整体回弹。
容易被忽略的点：
-
touchmove里必须e.preventDefault()，否则 iOS Safari 会触发页面滚动 - 索引字符映射到分组时，中文需用拼音首字母（推荐
pinyin-pro库轻量版，不要用china-division等大包） - 如果数据来自接口，分组和索引字符必须预计算好再渲染，不要在滚动时实时生成
dt - Layui 的
dropdown默认关闭方式是点击外部，但索引选择后应立即关闭，别等用户再点一次空白处
