网页材料设计 - 如何进行自动完成输入

Question

网页材料设计 - 如何进行自动完成输入

我正在使用谷歌的网页材料设计。我想使用他们的选择组件作为自动完成组件。我的目标是你可以在 React mui 中看到的自动完成功能。我已经删除了disabled和readonlyinput 属性，但我仍然无法在输入字段中写入任何内容。

<div class="mdc-select demo-width-class">
  <div class="mdc-select__anchor">
    <span class="mdc-select__ripple"></span>
    <input type="text" class="mdc-select__selected-text">
    <i class="mdc-select__dropdown-icon"></i>
    <span class="mdc-floating-label">Pick a Food Group</span>
    <span class="mdc-line-ripple"></span>
  </div>

  <div class="mdc-select__menu mdc-menu mdc-menu-surface mdc-menu-surface--fullwidth">
    <ul class="mdc-list">
      <li class="mdc-list-item mdc-list-item--selected" data-value="" aria-selected="true"></li>
      <li class="mdc-list-item" data-value="grains">
        <span class="mdc-list-item__text">
          Bread, Cereal, Rice, and Pasta
        </span>
      </li>
      <li class="mdc-list-item" data-value="vegetables">
        <span class="mdc-list-item__text">
          Vegetables
        </span>
      </li>
      <li class="mdc-list-item" data-value="fruit">
        <span class="mdc-list-item__text">
          Fruit
        </span>
      </li>
    </ul>
  </div>
</div>

Run Code Online (Sandbox Code Playgroud)

如何启用输入字段以写入其中，以便我可以调整并制作自动完成输入字段？

Answer 1

Sif*_*que 0

您需要将输入字段与选择结合起来以获得输入字段，然后编写一些 JavaScript 来获得自动完成功能。你可以看看我的解决方案。

console.clear();
const select = new mdc.select.MDCSelect(document.querySelector('.mdc-select'));

select.listen('MDCSelect:change', () => {
  alert(`Selected option at index ${select.selectedIndex} with value "${select.value}"`);
});

Run Code Online (Sandbox Code Playgroud)

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link href="https://unpkg.com/material-components-web@v4.0.0/dist/material-components-web.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <script src="https://unpkg.com/material-components-web@v4.0.0/dist/material-components-web.min.js"></script>
</head>
<body>
  <div class="mdc-select">
  <div class="mdc-select__anchor demo-width-class">
    <i class="mdc-select__dropdown-icon"></i>
    <div class="mdc-select__selected-text"></div>
    <span class="mdc-floating-label">Pick a Food Group</span>
    <div class="mdc-line-ripple"></div>
  </div>

  <div class="mdc-select__menu mdc-menu mdc-menu-surface demo-width-class">
    <ul class="mdc-list">
      <input type="text" class="mdc-list-item--selected mdc-text-field__input" id="name-input">
      <label for="name-input" class="mdc-floating-label">search....</label>
      <li class="mdc-list-item" data-value="grains">
        Bread, Cereal, Rice, and Pasta
      </li>
      <li class="mdc-list-item" data-value="vegetables">
        Vegetables
      </li>
      <li class="mdc-list-item" data-value="fruit">
        Fruit
      </li>
      
      <input type="hidden" name="input_name" value="input_value" class="my_mdc-select__value" />
    
    </ul>
  </div>
</div>


  


</body>
</html>

Run Code Online (Sandbox Code Playgroud)

归档时间：	5 年，8 月前
查看次数：	3836 次
最近记录：	3 年，2 月前