需求:由于下拉框中数据过多,用户翻看十分麻烦,所以提出新需求在下拉框中加入输入功能,进行模糊查询数据并展示在下拉框中。

这里其实可以直接引入组件完成功能,但由于san框架组件引入报错,所以使用了datalist和input结合使用完成功能。

1
2
3
4
5
6
7
8
9
datalist标签定义选项列表。请与 input 元素配合使用该元素,来定义 input 可能的值。

datalist 及其选项不会被显示出来,它仅仅是合法的输入值列表。

请使用 input 元素的 list 属性来绑定 datalist。

所有主流浏览器都支持 datalist 标签,除了 Internet Explorer 和 Safari。

datalist 标签是 HTML 5 中的新标签。
1
2
3
4
5
<input list="resourceChoose" value="{= select_value =}" class="pdr-0 c-select resourceChoose">
<datalist id="resourceChoose">
<option value="">请选择</option>
<option s-for="rc in resourceChooseList" value="{{rc.resourceName}}">{{rc.resourceName]}}</option>
</datalist>

可实现下拉搜索功能

image-20210713115345680

但使用这个方法有一些问题,因为datalist标签无法自定义css样式,导致选择框数据有多长就会显示多长,对用户不友好