输入自动完成 CSS 颜色 - CSS

介绍

在编写 CSS 代码时，经常需要输入颜色值。输入颜色值时，有时候会忘记颜色值的名称或者对颜色的名称不太熟悉，这时就需要输入自动完成。输入自动完成可以帮助程序员更快速地输入 CSS 颜色值。

本文将介绍如何实现输入自动完成 CSS 颜色。

实现步骤

步骤一：添加 HTML 代码

首先，在 HTML 中添加一个文本框：

<input type="text" id="input-color" />

步骤二：添加 CSS 代码

然后，添加 CSS 代码，样式用来实现下拉列表：

/* 下拉列表样式 */
.autocomplete-items {
  position: absolute;
  z-index: 9999;
  top: 100%;
  left: 0;
  right: 0;
  max-height: 150px;
  overflow-y: auto;
  background-color: #fff;
  border: 1px solid #d4d4d4;
  border-top: none;
}

/* 每一项的样式 */
.autocomplete-items div {
  padding: 10px;
  cursor: pointer;
  background-color: #fff;
  border-bottom: 1px solid #d4d4d4;
}

/* 高亮项的样式 */
.autocomplete-active {
  background-color: DodgerBlue !important;
  color: #fff;
}

步骤三：添加 JavaScript 代码

最后，在 JavaScript 中添加代码实现输入自动完成功能：

var colorArr = [
  "AliceBlue",
  "AntiqueWhite",
  "Aqua",
  "Aquamarine",
  "Azure",
  "Beige",
  "Bisque",
  "Black",
  "BlanchedAlmond",
  "Blue",
  "BlueViolet",
  "Brown",
  "BurlyWood",
  "CadetBlue",
  "Chartreuse",
  "Chocolate",
  "Coral",
  "CornflowerBlue",
  "Cornsilk",
  "Crimson",
  "Cyan",
  "DarkBlue",
  "DarkCyan",
  "DarkGoldenRod",
  "DarkGray",
  "DarkGrey",
  "DarkGreen",
  "DarkKhaki",
  "DarkMagenta",
  "DarkOliveGreen",
  "DarkOrange",
  "DarkOrchid",
  "DarkRed",
  "DarkSalmon",
  "DarkSeaGreen",
  "DarkSlateBlue",
  "DarkSlateGray",
  "DarkSlateGrey",
  "DarkTurquoise",
  "DarkViolet",
  "DeepPink",
  "DeepSkyBlue",
  "DimGray",
  "DimGrey",
  "DodgerBlue",
  "FireBrick",
  "FloralWhite",
  "ForestGreen",
  "Fuchsia",
  "Gainsboro",
  "GhostWhite",
  "Gold",
  "GoldenRod",
  "Gray",
  "Grey",
  "Green",
  "GreenYellow",
  "HoneyDew",
  "HotPink",
  "IndianRed",
  "Indigo",
  "Ivory",
  "Khaki",
  "Lavender",
  "LavenderBlush",
  "LawnGreen",
  "LemonChiffon",
  "LightBlue",
  "LightCoral",
  "LightCyan",
  "LightGoldenRodYellow",
  "LightGray",
  "LightGrey",
  "LightGreen",
  "LightPink",
  "LightSalmon",
  "LightSeaGreen",
  "LightSkyBlue",
  "LightSlateGray",
  "LightSlateGrey",
  "LightSteelBlue",
  "LightYellow",
  "Lime",
  "LimeGreen",
  "Linen",
  "Magenta",
  "Maroon",
  "MediumAquaMarine",
  "MediumBlue",
  "MediumOrchid",
  "MediumPurple",
  "MediumSeaGreen",
  "MediumSlateBlue",
  "MediumSpringGreen",
  "MediumTurquoise",
  "MediumVioletRed",
  "MidnightBlue",
  "MintCream",
  "MistyRose",
  "Moccasin",
  "NavajoWhite",
  "Navy",
  "OldLace",
  "Olive",
  "OliveDrab",
  "Orange",
  "OrangeRed",
  "Orchid",
  "PaleGoldenRod",
  "PaleGreen",
  "PaleTurquoise",
  "PaleVioletRed",
  "PapayaWhip",
  "PeachPuff",
  "Peru",
  "Pink",
  "Plum",
  "PowderBlue",
  "Purple",
  "RebeccaPurple",
  "Red",
  "RosyBrown",
  "RoyalBlue",
  "SaddleBrown",
  "Salmon",
  "SandyBrown",
  "SeaGreen",
  "SeaShell",
  "Sienna",
  "Silver",
  "SkyBlue",
  "SlateBlue",
  "SlateGray",
  "SlateGrey",
  "Snow",
  "SpringGreen",
  "SteelBlue",
  "Tan",
  "Teal",
  "Thistle",
  "Tomato",
  "Turquoise",
  "Violet",
  "Wheat",
  "White",
  "WhiteSmoke",
  "Yellow",
  "YellowGreen"
];

var input = document.getElementById("input-color");

input.addEventListener("input", function() {
  var val = this.value;
  var s = "";
  if (val) {
    colorArr.forEach(function(colorName) {
      if (colorName.indexOf(val) === 0) {
        s += "<div>" + colorName + "</div>";
      }
    });
  }

  this.nextSibling.innerHTML = s;
});

input.addEventListener("keydown", function(e) {
  var list = this.nextSibling;
  if (e.keyCode === 38) {
    // up arrow
    var active = list.querySelector(".autocomplete-active");
    if (active) {
      active.classList.remove("autocomplete-active");
      if (active.previousSibling) {
        active = active.previousSibling;
      } else {
        active = active.parentNode.lastChild;
      }
      active.classList.add("autocomplete-active");
    } else {
      active = list.lastChild;
      active.classList.add("autocomplete-active");
    }
  } else if (e.keyCode === 40) {
    // down arrow
    var active = list.querySelector(".autocomplete-active");
    if (active) {
      active.classList.remove("autocomplete-active");
      if (active.nextSibling) {
        active = active.nextSibling;
      } else {
        active = active.parentNode.firstChild;
      }
      active.classList.add("autocomplete-active");
    } else {
      active = list.firstChild;
      active.classList.add("autocomplete-active");
    }
  } else if (e.keyCode === 13) {
    // enter
    var active = list.querySelector(".autocomplete-active");
    if (active) {
      input.value = active.innerText;
      closeList();
    }
  }
});

function closeList() {
  var list = document.getElementsByClassName("autocomplete-items");
  for (var i = 0; i < list.length; i++) {
    list[i].parentNode.removeChild(list[i]);
  }
}

input.addEventListener("focus", function() {
  if (!this.nextSibling) {
    var div = document.createElement("div");
    div.setAttribute("class", "autocomplete-items");
    this.parentNode.appendChild(div);
    this.nextSibling = div;

    this.addEventListener("blur", function() {
      setTimeout(closeList, 100);
    });
  }
});

document.addEventListener("click", function(e) {
  closeList();
});

效果

效果如图：

总结

本文介绍了如何实现输入自动完成 CSS 颜色。希望对大家有所帮助。