HTML input绑定datalist下拉选项遮挡移动端键盘的解决方案咨询

<datalist id='example'>
       {
           props.list.map(data => <option value={props.data} />) // 1000 items
       }
</datalist>

<input list='example' type='text' />

上述代码通过list属性将text类型input与id为example的datalist绑定，datalist通过map方法一次性渲染1000条option选项。移动端点击input唤出datalist下拉层时，下拉层会覆盖系统软键盘，直接给datalist设置max-height样式无效，需要在不自定义下拉组件的前提下修复该问题。

首先明确核心前提：<datalist>是浏览器原生实现的表单控件，它的下拉层不属于常规DOM树可样式化的部分，尺寸、位置、层级完全由浏览器内核/系统WebView控制，直接给datalist标签写CSS控制下拉层外观本身就不生效，这是规范层面的限制，不是写法问题。
不需要自定义下拉组件的可行修复方案如下：

• 动态过滤渲染候选项，控制单次渲染的option数量
  原生datalist本身就支持根据输入内容自动匹配选项，不需要一开始就把1000条option全量塞进datalist。监听input的input事件，拿当前输入的关键词对props.list做实时过滤，每次只把匹配度最高的10-15条结果渲染到datalist里。
  候选项数量降到一屏以内（不超过软键盘上方的可视区域高度）后，所有移动端浏览器都会自动计算下拉层高度，不会再出现下拉层铺满视口盖住软键盘的问题。同时这个方案还能解决1000条option全量渲染导致的下拉卡顿问题，移动端本身也不适合展示过长的滚动选项列表，用户会通过输入关键词逐步缩小匹配范围，不会影响使用。
• 借助视觉视口API触发浏览器重算下拉层位置
  监听visualViewport的resize事件，移动端软键盘弹出时，window.visualViewport.height会自动收缩为软键盘上方的可见区域高度。检测到软键盘弹出（视口高度小于屏幕高度的60%即可判定）后，可以临时触发input的失焦再聚焦，强制浏览器按照当前收缩后的视口重新计算datalist下拉层的位置和高度，避免覆盖软键盘。
• 适配端内WebView的软键盘配置
  如果页面运行在安卓端定制WebView（比如App内嵌WebView、微信/支付宝内置浏览器）中，可以让端侧把WebView的软键盘模式设置为adjustResize，该模式下WebView会主动把页面渲染区域压缩到软键盘上方，浏览器渲染datalist时会自动适配压缩后的区域，不会延伸到软键盘位置。iOS端WKWebView默认采用该调整逻辑，出现覆盖问题基本都是选项过多导致的高度计算异常，用第一个过滤方案即可解决。

不要尝试通过z-index、position、max-height这类常规CSS属性修改datalist下拉层的表现，目前所有主流移动端浏览器都没有开放这部分的自定义样式权限，这类写法不会有任何效果。

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