datalist和input下拉框加入输入框可模糊查询数据

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

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

datalist标签定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。

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

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

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

datalist 标签是 HTML 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>

可实现下拉搜索功能

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

我的博客主页 ：https://qingmuzhang.gitee.io/