求助：寻找Material Design风格带搜索的Select组件（MaterializeCSS不支持）

绝对没问题！MaterializeCSS原生确实没提供带搜索框的Select组件，但咱们有两种靠谱的方案来实现你要的效果——要么自己动手定制一个，要么用适配Materialize风格的第三方插件，都能达到类似你参考的那个组件的体验。

方法一：自定义实现带搜索的Select组件 #

这种方式能让你完全控制组件的样式和逻辑，完美贴合你的页面需求。

HTML结构 #

先搭建基础的输入框和下拉菜单结构，和Materialize的输入风格保持一致：

<div class="input-field">
  <input type="text" id="search-select" placeholder="搜索选项...">
  <ul id="select-options" class="dropdown-content">
    <li data-value="1"><span>前端开发</span></li>
    <li data-value="2"><span>后端开发</span></li>
    <li data-value="3"><span>UI设计</span></li>
    <li data-value="4"><span>产品经理</span></li>
  </ul>
  <label for="search-select">选择职位</label>
</div>

CSS微调（适配Materialize风格） #

给输入框留够下拉箭头的空间，同时限制下拉菜单的高度，避免选项太多溢出：

#search-select {
  padding-right: 3rem; /* 给Materialize下拉箭头预留位置 */
}

#select-options {
  max-height: 220px;
  overflow-y: auto;
  width: 100% !important; /* 确保下拉菜单和输入框宽度一致 */
}

JavaScript逻辑（实现搜索过滤） #

初始化Materialize的下拉组件，再添加搜索过滤的逻辑：

document.addEventListener('DOMContentLoaded', function() {
  // 初始化Materialize下拉菜单
  const dropdownElement = document.querySelector('#select-options');
  const dropdownInstance = M.Dropdown.init(dropdownElement, {
    trigger: document.querySelector('#search-select'),
    closeOnClick: false, // 点击选项后不关闭下拉，方便继续搜索
    hover: false
  });

  // 搜索过滤功能
  const searchInput = document.querySelector('#search-select');
  const allOptions = document.querySelectorAll('#select-options li');

  searchInput.addEventListener('keyup', function(e) {
    const searchTerm = e.target.value.trim().toLowerCase();

    allOptions.forEach(option => {
      const optionText = option.textContent.toLowerCase();
      if (optionText.includes(searchTerm)) {
        option.style.display = 'block';
      } else {
        option.style.display = 'none';
      }
    });
  });

  // 点击选项后把值回填到输入框
  allOptions.forEach(option => {
    option.addEventListener('click', function() {
      searchInput.value = this.textContent;
      dropdownInstance.close();
      // 这里可以添加选中后的逻辑，比如触发表单提交或者存储选中值
    });
  });
});

方法二：使用第三方适配插件 #

如果不想自己写逻辑，可以用专门为Materialize打造的带搜索Select插件，节省开发时间。

步骤1：引入资源 #

确保先加载Materialize的核心CSS和JS，再引入插件文件：

<!-- Materialize核心资源 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

<!-- 搜索Select插件资源 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/materialize-searchable-select@1.0.0/dist/css/materialize-searchable-select.min.css">
<script src="https://cdn.jsdelivr.net/npm/materialize-searchable-select@1.0.0/dist/js/materialize-searchable-select.min.js"></script>

步骤2：使用组件 #

直接给原生的select标签添加插件类名即可：

<div class="input-field">
  <select class="searchable-select">
    <option value="" disabled selected>选择职位</option>
    <option value="1">前端开发</option>
    <option value="2">后端开发</option>
    <option value="3">UI设计</option>
    <option value="4">产品经理</option>
  </select>
  <label>带搜索的选择器</label>
</div>

步骤3：初始化插件 #

在DOM加载完成后初始化插件：

document.addEventListener('DOMContentLoaded', function() {
  M.SearchableSelect.init(document.querySelectorAll('.searchable-select'));
});

小提示 #

• 自定义方案适合需要高度定制样式或逻辑的场景，比如要添加额外的选中动画、多选项支持等；
• 插件方案更快捷，适合快速开发，而且样式和Materialize原生组件完全统一。

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