html - 网页 Material 设计 - 如何进行自动完成输入

Question

我正在使用谷歌的 material design for web .我想用他们的select component作为自动完成组件。我的目标是autocomplete你可以在 react mui 中看到。我已经删除了 disabled和 readonly输入属性，但我仍然无法向输入字段写入任何内容。

<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>

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

Answer 1

因为您已经提到您希望在不使用 react 的情况下看到答案，因此使用纯 javascript。我已经做到了。我结合了来自 @Sifat Haque 的 css 和标记的回答和来自 w3schools 的完整工作自动完成逻辑.尽管这看起来很简单，但要完成这项工作却相当麻烦。

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

function autocomplete(inp, arr) {
   var currentFocus;
 
  inp.addEventListener("input", autocomp);
  inp.addEventListener("click", autocomp);

  inp.addEventListener("focus", autocomp);

  function autocomp(e) {
    var a, b, i, val = this.value;
    closeAllLists();
    currentFocus = -1;

    a = document.createElement("ul");
    a.setAttribute("id", this.id + "autocomplete-list");
    a.setAttribute("class", "autocomplete-items mdc-list");

    document.getElementById("autocomp").appendChild(a);

    for (i = 0; i < arr.length; i++) {
      if (arr[i].substr(0, val.length).toUpperCase() == val.toUpperCase() || (val.trim()).length == 0) {
        b = document.createElement("li");
        b.setAttribute("class", "mdc-list-item")
        b.innerHTML = "<span class='mdc-list-item__text'>" + arr[i] + "</span>";
        b.innerHTML += "<input type='hidden' value='" + arr[i] + "'>";

        b.addEventListener("click", function(e) {
          inp.value = this.getElementsByTagName("input")[0].value;
          closeAllLists();
        });
        a.appendChild(b);
      }
    }
  }
  inp.addEventListener("keydown", function(e) {
    var x = document.getElementById(this.id + "autocomplete-list");
    if (x) x = x.getElementsByTagName("li");
    if (e.keyCode == 40) {
      currentFocus++;
      addActive(x);
    } else if (e.keyCode == 38) { //up
      currentFocus--;
      addActive(x);
    } else if (e.keyCode == 13) {
      e.preventDefault();
      if (currentFocus > -1) {
        if (x) x[currentFocus].click();
      }
    }
  });

  function addActive(x) {
    if (!x) return false;
    removeActive(x);
    if (currentFocus >= x.length) currentFocus = 0;
    if (currentFocus < 0) currentFocus = (x.length - 1);
    x[currentFocus].classList.add("autocomplete-active");
    x[currentFocus].classList.add("mdc-list-item--selected");
  }

  function removeActive(x) {
    for (var i = 0; i < x.length; i++) {
      x[i].classList.remove("autocomplete-active");
      x[i].classList.remove("mdc-list-item--selected");
    }
  }

  function closeAllLists(elmnt) {
    var x = document.getElementsByClassName("autocomplete-items");
    for (var i = 0; i < x.length; i++) {
      if (elmnt != x[i] && elmnt != inp) {
        x[i].parentNode.removeChild(x[i]);
      }
    }
  }

}

/*An array containing all the foods :*/
var foods = ["fruit", "vegetables", "grains", "fries"];

/*initiate the autocomplete function on the "myInput" element, and pass along the foods array as possible autocomplete values:*/
autocomplete(document.getElementById("name-input"), foods);

function makeActive(element) {
  document.getElementById("name-input").focus();
  element.classList.add("mdc-select--focused");
  element.classList.add("mdc-select--activated")
}

* {
  box-sizing: border-box;
}

.autocomplete {
  position: relative;
  display: inline-block;
}

input {
  border: 1px solid transparent;
  background-color: #f1f1f1;
  padding: 10px;
  font-size: 16px;
}

input[type=text] {
  background-color: transparent;
  width: 100%;
  margin-left: -200px;
  margin-top: 30px;
  z-index: -2;
}

input[type=text]:active {
  border: none;
}

.autocomplete-items {
  position: absolute;
  border: 1px solid #d4d4d4;
  border-bottom: none;
  border-top: none;
  z-index: 99;
  /*position the autocomplete items to be the same width as the container:*/
  top: 100%;
  left: 0;
  right: 0;
  max-height: 200px;
  /*overflow-y: scroll; */
}

.autocomplete-items li {
  padding: 10px;
  cursor: pointer;
  background-color: #fff;
  border-bottom: 1px solid #d4d4d4;
}

.mdc-select__menu {
  margin-top: -30px;
  z-index: 1;
  height: 150px;
  box-shadow: none;
  background-color: transparent;
  overflow-x: hidden !important;
}

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!DOCTYPE html>
  <html>

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <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>


    <h2>Autocomplete</h2>

    <p>Start typing:</p>

    <!--Make sure the form has the autocomplete function switched off:-->

    <form autocomplete="off" action="" method="post">

      <div class="mdc-select" onclick="makeActive(this)">
        <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>
          <input type="text" id="name-input" name="selectione">


        </div>
        <div class="mdc-select__menu mdc-menu mdc-menu-surface">
          <div class="autocomplete" id='autocomp' style="width:200px;">
          </div>
        </div>
      </div>

      <input type="submit">
    </form>

希望这可以帮助!
编辑:添加标准选择选项