CSS 创建一个自定义的输入框自动补全列表

在本文中，我们将介绍如何使用CSS来创建一个自定义的输入框自动补全列表。输入框自动补全功能在网站和应用程序中非常常见，它可以帮助用户更快速地输入所需内容，并提高用户体验。

阅读更多：https://sotoolbox.com/tag/css target="_blank" rel="nofollow">CSS 教程

基本原理

输入框自动补全的基本原理是根据用户输入的内容，在一个下拉列表中显示匹配的选项。用户可以通过键盘或鼠标选择一个选项，然后该选项的值将被自动填入输入框中。

实现步骤

步骤一：HTML 结构

首先，让我们创建一个基本的HTML结构，包含一个输入框和一个下拉列表：

<input type="text" id="myInput" placeholder="输入内容" autocomplete="off">
<div id="myList"></div>

步骤二：CSS 样式

接下来，我们需要使用CSS样式来设置输入框和下拉列表的外观：

#myInput {
  width: 300px;
  padding: 10px;
  border: 1px solid #ccc;
}

#myList {
  width: 300px;
  margin-top: 5px;
  border: 1px solid #ccc;
  list-style-type: none;
  padding: 0;
}

步骤三：JavaScript 功能

现在，我们使用JavaScript来实现输入框自动补全的功能。我们将在输入框中监听键盘事件，并通过AJAX从服务器获取匹配的选项列表。

var input = document.getElementById("myInput");
var list = document.getElementById("myList");

input.addEventListener("keyup", function(event) {
  var keyword = input.value;

  // 发送AJAX请求到服务器，获取匹配的选项列表
  // 这里省略实际的AJAX代码

  // 生成下拉列表的HTML内容
  var https://sotoolbox.com/tag/css target="_blank" rel="nofollow">html = "";
  for (var i = 0; i < options.length; i++) {
    https://sotoolbox.com/tag/css target="_blank" rel="nofollow">html += "<li>" + options[i] + "</li>";
  }

  // 将下拉列表的HTML内容填充到myList元素中
  list.innerHTML = html;
});

自定义样式

除了基本的功能实现，我们还可以根据需要进行自定义样式。例如，可以为下拉列表添加高亮效果、鼠标悬停效果和选中效果等。

#myList li {
  padding: 10px;
  cursor: pointer;
}

#myList li:hover {
  background-color: #f9f9f9;
}

#myList li.selected {
  background-color: #ccc;
  color: white;
}

input.addEventListener("keyup", function(event) {
  // 省略之前的代码

  // 为下拉列表的每个选项添加点击事件
  var items = list.getElementsByTagName("li");
  for (var i = 0; i < items.length; i++) {
    items[i].addEventListener("click", function() {
      // 将选中的选项的值填入输入框
      input.value = this.innerText;

      // 清空下拉列表
      list.innerHTML = "";
    });

    items[i].addEventListener("mouseover", function() {
      // 添加鼠标悬停效果
      this.classList.add("selected");
    });

    items[i].addEventListener("mouseout", function() {
      // 移除鼠标悬停效果
      this.classList.remove("selected");
    });
  }
});

经过以上的步骤，我们已经成功地创建了一个自定义的输入框自动补全列表。