Question

我是物化CSS框架的新手，我正在寻找可搜索的选择。

我添加了选择组件，但现在我希望它可以搜索，以便用户可以从下拉选项中搜索值并选择值。

提前致谢

Answer 1

我已经搜索该选项已有一段时间了。在深入研究实现Git Hub线程后，从LeMinaw

找到了这个答案

他搞砸了一切。但他使用的是自定义的实现文件，并且该文件在移动设备上无法正常运行。因此，我修改了代码以解决移动问题。导入Materialize.js文件MaterilizeSelect.js后，请使用导入以下脚本文件。

并选择格式如下

 <div class="input-field col s6">
            <select data-id="26" id="MySelct" serachname="myselectsearch" searchable="your placeholder for seach box">
              <option value="some1">Some One</option>
              <option value="SeamSeam">SeamSeam</option>
              <option value="toott">Toott</option>
              <option value="Flat">Flat</option>
            </select>
            <label for="roof_type">My Select</label>
</div>

serachname->搜索框的全名
可搜索->占位符，您的搜索框（标签）

希望这会有所帮助。再次感谢LeMinaw

Answer 2

该问题的另一种解决方案是在使用Autocomplete时设置minLength:0-本质上会触发焦点上的下拉选项，并允许搜索或选择。

HTML：

<input type="text" id="autocomplete-input" class="autocomplete">
<label for="autocomplete-input">Autocomplete</label>

JS：

var elems = document.querySelectorAll('.autocomplete');
var instances = M.Autocomplete.init(elems, {
   data: {
      "Apple": null,
      "Microsoft": null,
      "Google": 'https://placehold.it/250x250'
      },
   minLength: 0, 
});

Codepen here。

Answer 3

github 上有一个开放的 issue。

LeMinaw 的解决方案：

<块引用>

改进：

无需修改Materialize JS文件很好地抓住键盘焦点没有需要烦人的 JQuery 正确渲染任何小部件宽度演示

代码在这个要点中可用： https://gist.github.com/LeMinaw/52675dae35531999e22f670fb66d389b

要使用它，只需加载这个 JS 文件并添加 searchable="placeholder" 到您的选择元素。

如何在materialize css框架中添加select的搜索

3 个答案: