Javascript 如何在物化css框架中添加搜索选择

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

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

---

提前感谢

我已经搜索这个选项很久了。在深入研究MaterializeGitHub之后，线程从

他把一切都搞定了。但他使用的是一个定制的物化文件，而且它在手机上也不起作用。所以，我修改了代码以解决移动问题。导入Materialize.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

这个问题的另一个解决方案是在使用时设置

minLength:0

——这实际上会触发焦点上的下拉选项，并允许搜索或选择

HTML:

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

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

代码笔。

github上有一个打开的窗口

客户的解决方案：

改进：

无需修改Materialize JS文件就能很好地抓住键盘焦点不 需要为任何小部件宽度演示正确呈现恼人的JQuery

代码在以下要点中可用：

要使用它，只需加载此JS文件并将

searchable=“placeholder”

添加到 选择元素

---

你是说自动完成吗？不完全是。我想要选择框，但带有搜索选项。materializecss autocomplete的行为不同。您是否添加了一个文本框，在单击时显示包含下拉列表的div？你有类似的吗？我的工作选择从图书馆，所以我担心有选择box@bitto是的，你需要有一个文本输入太正确，以便用户可以搜索的选项。您应该将复选框列表替换为选项列表。当用户单击某个选项时，文本应该反映在文本框中（可以使用Jquery/JS完成）。另外，当你评论标记你想与之交流的用户时，请添加一个“@”标记，否则他们将不会收到通知。materializeselect.js的链接已失效。@ShaidaMuhammad公开了回购协议。你现在应该有权限了。