HOWTO 问题指引

常用问题指引与实用方法

Menus 菜单

图标栏 菜单图标 可折叠内容 选项卡 垂直选项卡 选项卡标题 整页选项卡 悬停选项卡 顶部导航栏 响应式顶部导航 带有图标的导航栏 搜索菜单 搜索栏 固定侧边栏 侧边导航 响应式侧边栏 全屏覆盖导航 画布外菜单 侧边导航按钮 带图标的侧边栏 水平滚动菜单 垂直菜单 底部导航 响应式底部导航 底部边框导航链接 右对齐菜单按钮 居中的顶部导航 等宽导航栏链接 固定菜单 向下滑动滚动条 隐藏滚动菜单 在滚动上缩小导航菜单 粘性/附加导航栏 图像导航栏 可悬停的下拉菜单 可点击的下拉菜单 级联下拉列表 下拉导航栏 下拉侧边栏 带有下拉菜单的响应式导航栏 子导航 下拉菜单 超级菜单 移动导航菜单 窗帘菜单 折叠侧边栏 折叠侧面板 CSS 分页 CSS 面包屑 按钮组 垂直按钮组 粘性社交栏 胶囊导航 响应式标题

Images 图像

幻灯片 幻灯片库 模态图像 灯箱 响应式图像网格 图像网格 选项卡图像库 图像悬停覆盖 图像叠加幻灯片 图像叠加缩放 图像叠加标题 图像叠加图标 添加图像效果 黑白图像 在图像上放置文本 图像上的文本块 带有透明文本的图像 整页图像 表单图像 主图像 背景图像模糊 更改滚动背景 并排对齐图像 圆形图像 头像图片 响应式图像 居中图像 缩略图 为图像添加边框 团队展示图像页面 粘滞图像 翻转图像 摇动图像 作品集图库 带有过滤功能的作品集图库 图像缩放 图像放大镜 图像比较滑块

Buttons 按钮

警报按钮 轮廓按钮 拆分按钮 动画按钮 淡化按钮 图像上的按钮 社交媒体按钮 阅读更多/更少按钮 加载按钮 下载按钮 胶囊按钮 通知按钮 图标按钮 Next/prev 按钮 导航栏中的更多按钮 全宽(块)按钮 文本按钮 圆形按钮 滚动返回顶部按钮

Form 表单

登录表单 报名表单 结帐表单 联系表单 社交登录表单 注册表单 带有图标的表单 邮件通讯表单 堆叠表单 响应式表单 弹出式表单 内联表单 清除输入字段 隐藏输入数字中的箭头 将文本复制到剪贴板 动画搜索表单 搜索按钮 全屏搜索 菜单中的输入字段 菜单中的登录表单 自定义复选框 自定义选择框 切换开关 选中复选框时显示文本 检测大写键锁定 回车触发按钮单击 密码验证 切换密码可见性 多步骤表单 在输入字段上创建自动完成 关闭输入字段的自动完成 禁用表单的拼写检查 文件上传按钮 空字段的 JS 验证

Filters 过滤/搜索

过滤/搜索列表 过滤/搜索表格 过滤元素 过滤/搜索下拉菜单 对列表进行排序 对表格进行排序

Tables 表格

斑马条纹表格 居中表格 响应式表格 创建比较表格

更多

全屏视频 模态框 删除确认模态 时间线 滚动指示器 进度条 技能栏 范围滑块 工具提示 在悬停时显示元素 弹出窗口 折叠 CSS 日历 HTML 包含 待办事项列表 加载器 星级评分 用户评分 叠加 联系人名片 卡片 翻转卡片 个人资料卡 产品卡片 警报 标注消息 注意事项 标签 圆/圆点 HR 元素的样式 优惠券 列表组 不带项目符号的列表 响应式文本 剪切文本 发光文本 固定页脚 粘性元素 等高的列 清除浮动 响应式浮动 屏幕底部弹出窗口 全屏窗口 滚动绘图 平滑滚动 滚动背景渐变 滚动标题 调整滚动页眉的大小 响应式价格表 视差滚动 纵横比 响应式 Iframes 框架 切换喜欢/不喜欢 切换隐藏/显示 切换暗/亮模式 切换/交换文本 切换类 添加一个类 删除一个类 添加 Active 活动类到当前元素 树形视图 从对象中删除属性 在线离线检测 检查元素是否隐藏 重定向到另一个网页 悬停时放大 3D 翻转框 垂直居中元素 在 DIV 中居中一个按钮 悬停过渡 CSS 箭头 CSS 形状 下载链接 全高元素 浏览器窗口 自定义滚动条 隐藏滚动条 始终显示滚动条 设备外观 移除 Contenteditable 边框 更改占位符颜色 更改文本选择颜色 更改列表项目符号颜色 垂直线 分隔线 动画图标 倒数计时器 打字效果 即将推出页面 聊天样式 弹出聊天窗口 分屏 推荐样式 计数器 报价幻灯片 可关闭的列表项 典型的设备断点 可拖动的 HTML 元素 使用 JavaScript 进行媒体查询 创建语法高亮 JS 动画 JS 获取字符串的长度 JS 设置默认参数 获取当前 URL 获取当前屏幕尺寸 获取 iframe 元素

Website 制作网站示例

制作网站 使用 W3.CSS 制作网站 使用 Bootstrap 制作网站 使用 Bootstrap4 制作网站 制作 HTML 书籍网站 网站居中 网站联系人页面 网站关于页面 设置标头样式 示例网站

Grid 网格布局

2 列布局 3 列布局 4 列布局 扩展网格 列表网格视图 混合列布局 响应式列卡 响应式锯齿形布局 博客布局

Google

Google 图表 Google 字体

转换器

重量转换器 温度转换器 长度转换器 速度转换器



如何创建 - 在输入字段上创建自动完成

了解如何创建 Autocomplete 自动完成功能。


自动完成

开始输入:


亲自试一试 »


创建自动填写表单

步骤 1) 添加 HTML:

实例

<!--确保表单已关闭自动完成功能:-->
<form autocomplete="off" action="/action_page.php">
  <div class="autocomplete" style="width:300px;">
    <input id="myInput" type="text" name="myCountry" placeholder="Country">
  </div>
  <input type="submit">
</form>

步骤 2) 创建一个 JavaScript 数组:

实例

世界上所有地区的数组:

var countries = ["Afghanistan","Albania","Algeria","Andorra","Angola","Anguilla","Antigua &amp; Barbuda","Argentina","Armenia","Aruba","Australia","Austria","Azerbaijan","Bahamas","Bahrain","Bangladesh","Barbados","Belarus","Belgium","Belize","Benin","Bermuda","Bhutan","Bolivia","Bosnia &amp; Herzegovina","Botswana","Brazil","British Virgin Islands","Brunei","Bulgaria","Burkina Faso","Burundi","Cambodia","Cameroon","Canada","Cape Verde","Cayman Islands","Central Arfrican Republic","Chad","Chile","China","Colombia","Congo","Cook Islands","Costa Rica","Cote D Ivoire","Croatia","Cuba","Curacao","Cyprus","Czech Republic","Denmark","Djibouti","Dominica","Dominican Republic","Ecuador","Egypt","El Salvador","Equatorial Guinea","Eritrea","Estonia","Ethiopia","Falkland Islands","Faroe Islands","Fiji","Finland","France","French Polynesia","French West Indies","Gabon","Gambia","Georgia","Germany","Ghana","Gibraltar","Greece","Greenland","Grenada","Guam","Guatemala","Guernsey","Guinea","Guinea Bissau","Guyana","Haiti","Honduras","Hong Kong","Hungary","Iceland","India","Indonesia","Iran","Iraq","Ireland","Isle of Man","Israel","Italy","Jamaica","Japan","Jersey","Jordan","Kazakhstan","Kenya","Kiribati","Kosovo","Kuwait","Kyrgyzstan","Laos","Latvia","Lebanon","Lesotho","Liberia","Libya","Liechtenstein","Lithuania","Luxembourg","Macau","Macedonia","Madagascar","Malawi","Malaysia","Maldives","Mali","Malta","Marshall Islands","Mauritania","Mauritius","Mexico","Micronesia","Moldova","Monaco","Mongolia","Montenegro","Montserrat","Morocco","Mozambique","Myanmar","Namibia","Nauro","Nepal","Netherlands","Netherlands Antilles","New Caledonia","New Zealand","Nicaragua","Niger","Nigeria","North Korea","Norway","Oman","Pakistan","Palau","Palestine","Panama","Papua New Guinea","Paraguay","Peru","Philippines","Poland","Portugal","Puerto Rico","Qatar","Reunion","Romania","Russia","Rwanda","Saint Pierre &amp; Miquelon","Samoa","San Marino","Sao Tome and Principe","Saudi Arabia","Senegal","Serbia","Seychelles","Sierra Leone","Singapore","Slovakia","Slovenia","Solomon Islands","Somalia","South Africa","South Korea","South Sudan","Spain","Sri Lanka","St Kitts &amp; Nevis","St Lucia","St Vincent","Sudan","Suriname","Swaziland","Sweden","Switzerland","Syria","Taiwan","Tajikistan","Tanzania","Thailand","Timor L'Este","Togo","Tonga","Trinidad &amp; Tobago","Tunisia","Turkey","Turkmenistan","Turks &amp; Caicos","Tuvalu","Uganda","Ukraine","United Arab Emirates","United Kingdom","United States of America","Uruguay","Uzbekistan","Vanuatu","Vatican City","Venezuela","Vietnam","Virgin Islands (US)","Yemen","Zambia","Zimbabwe"];

第 3 步)添加 CSS:

容器必须有 "relative" 定位。

实例

* { box-sizing: border-box; }
body {
  font: 16px Arial;
}
.autocomplete {
  /*容器必须相对定位:*/
  position: relative;
  display: inline-block;
}
input {
  border: 1px solid transparent;
  background-color: #f1f1f1;
  padding: 10px;
  font-size: 16px;
}
input[type=text] {
  background-color: #f1f1f1;
  width: 100%;
}
input[type=submit] {
  background-color: DodgerBlue;
  color: #fff;
}
.autocomplete-items {
  position: absolute;
  border: 1px solid #d4d4d4;
  border-bottom: none;
  border-top: none;
  z-index: 99;
  /*将自动完成项定位为与容器相同的宽度:*/
  top: 100%;
  left: 0;
  right: 0;
}
.autocomplete-items div {
  padding: 10px;
  cursor: pointer;
  background-color: #fff;
  border-bottom: 1px solid #d4d4d4;
}
.autocomplete-items div:hover {
  /*当悬停一个项目时:*/
  background-color: #e9e9e9;
}
.autocomplete-active {
  /*当使用箭头键浏览项目时:*/
  background-color: DodgerBlue !important;
  color: #ffffff;
}


第 4 步)添加 JavaScript:

实例

function autocomplete(inp, arr) {
  /* autocomplete 自动完成功能有两个参数,
  文本字段元素和一组可能的自动完成值:*/
  var currentFocus;
  /*当有人在文本字段中写入时执行一个函数:*/
  inp.addEventListener("input", function(e) {
      var a, b, i, val = this.value;
      /*关闭任何已经打开的自动完成值列表*/
      closeAllLists();
      if (!val) { return false;}
      currentFocus = -1;
      /*创建一个包含项目(值)的 DIV 元素:*/
      a = document.createElement("DIV");
      a.setAttribute("id", this.id + "autocomplete-list");
      a.setAttribute("class", "autocomplete-items");
      /*将 DIV 元素附加为自动完成容器的子元素:*/
      this.parentNode.appendChild(a);
      /*对于数组中的每一项...*/
      for (i = 0; i < arr.length; i++) {
        /*检查项目是否以与文本字段值相同的字母开头:*/
        if (arr[i].substr(0, val.length).toUpperCase() == val.toUpperCase()) {
          /*为每个匹配的元素创建一个DIV元素:*/
          b = document.createElement("DIV");
          /*将匹配的字母加粗:*/
          b.innerHTML = "<strong>" + arr[i].substr(0, val.length) + "</strong>";
          b.innerHTML += arr[i].substr(val.length);
          /*插入将保存当前数组项的值的输入字段:*/
          b.innerHTML += "<input type='hidden' value='" + arr[i] + "'>";
          /*当有人点击项目值(DIV元素)时执行一个函数:*/
              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("div");
      if (e.keyCode == 40) {
        /*如果按下箭头 DOWN 键,
        增加 currentFocus 变量:*/
        currentFocus++;
        /*并使当前项目更加可见:*/
        addActive(x);
      } else if (e.keyCode == 38) { //up
        /*如果按下向上箭头键,
        减少 currentFocus 变量:*/
        currentFocus--;
        /* 并使当前项目更明显:*/
        addActive(x);
      } else if (e.keyCode == 13) {
        /*如果按下 ENTER 键,则阻止提交表单,*/
        e.preventDefault();
        if (currentFocus > -1) {
          /*并模拟点击 "active" 项:*/
          if (x) x[currentFocus].click();
        }
      }
  });
  function addActive(x) {
    /*一个将项目分类为 "active" 的函数:*/
    if (!x) return false;
    /*首先删除所有项目的 "active" 类:*/
    removeActive(x);
    if (currentFocus >= x.length) currentFocus = 0;
    if (currentFocus < 0) currentFocus = (x.length - 1);
    /*添加类 "autocomplete-active":*/
    x[currentFocus].classList.add("autocomplete-active");
  }
  function removeActive(x) {
    /*从所有自动完成项中删除 "active" 类的函数:*/
    for (var i = 0; i < x.length; i++) {
      x[i].classList.remove("autocomplete-active");
    }
  }
  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]);
    }
  }
}
/*当有人点击文档时执行一个函数:*/
document.addEventListener("click", function (e) {
    closeAllLists(e.target);
});
}

步骤 5) 在"myInput"上启动自动完成效果:

实例

将 countries 数组作为自动完成函数的第二个参数传递:

<script>
autocomplete(document.getElementById("myInput"), countries);
</script>
亲自试一试 »