Web Component示例-带搜索功能的下拉框

示例 1:基本使用

示例 2:动态添加选项

使用方法:

先引入定义的组件SearchableSelect:

<script src="./SearchableSelect.js"></script>

然后注册自定义组件:

customElements.define('searchable-select', SearchableSelect);

最后和原生标签<select>一样的使用方法:

<searchable-select placeholder="请选择一个选项">
  <option value="value1">选项1</option>
  <option value="value2">选项2</option>
  <option value="value3">选项3</option>
</searchable-select>