对CSS表单进行材料化选择，按下键盘时如何获取第二个字母

Question

我正在通过Jquery在网页上使用materializeCSS。我有一个带有很多选项的选择框。通常，通过选择框，我可以为一个字母多次定价，以循环浏览以该字母开头的选项。当使用物化FormSelect时，我无法做到这一点。我按一次字母，它正确地带我到了该字母的第一个条目。当我第二次按下它时，虽然它离开了我。我可以使用向下箭头，但是在我的情况下，由于大多数客户都在美国，所以它是美国排名最高的国家/地区的列表。如果他们碰巧住在英国，尽管我希望他们可以按U，U到达那里，但他们不能。有人知道解决此问题的方法吗？

Answer 1

您需要使用Autocomplete代替一个选择，这将显示基于按键的可用选项列表。这是文档中的标记：

 <div class="row">
    <div class="col s12">
      <div class="row">
        <div class="input-field col s12">
          <i class="material-icons prefix">textsms</i>
          <input type="text" id="autocomplete-input" class="autocomplete">
          <label for="autocomplete-input">Autocomplete</label>
        </div>
      </div>
    </div>
  </div>

这是一个需要初始化的javascript组件，初始化时可以传递所需的数据：

document.addEventListener('DOMContentLoaded', function() {

    var elems = document.querySelectorAll('.autocomplete');
    var instances = M.Autocomplete.init(elems, {
      data: {
        "United Kingdom": null,
        "USA": null,
        "Uruguay": null
      },
    });

  });

仅供参考，null是一个可选的图像src-因此，在您的示例中，您可能会包含国家/地区标志：

"USA": '../img/usa.svg'

您可以传递许多其他有用的选项-设置触发下拉菜单的字符数，选择一个选项时运行功能，限制一次显示的选项数，等等。

https://materializecss.com/autocomplete.html

正在工作的演示Codepen here。