如何 - 自动完成

var countries = ["阿富汗", "阿尔巴尼亚", "阿尔及利亚", "安道尔", "安哥拉", "安圭拉", "安提瓜和巴布达", "阿根廷", "亚美尼亚", "阿鲁巴", "澳大利亚", "奥地利", "阿塞拜疆", "巴哈马", "巴林", "孟加拉国", "巴巴多斯", "白俄罗斯", "比利时", "伯利兹", "贝宁", "百慕大", "不丹", "玻利维亚", "波斯尼亚和黑塞哥维那", "博茨瓦纳", "巴西", "英属维尔京群岛", "文莱", "保加利亚", "布基纳法索", "布隆迪", "柬埔寨", "喀麦隆", "加拿大", "佛得角", "开曼群岛", "中非共和国", "乍得", "智利", "中国", "哥伦比亚", "刚果", "库克群岛", "哥斯达黎加", "科特迪瓦", "克罗地亚", "古巴", "库拉索", "塞浦路斯", "捷克共和国", "丹麦", "吉布提", "多米尼克", "多米尼加共和国", "厄瓜多尔", "埃及", "萨尔瓦多", "赤道几内亚", "厄立特里亚", "爱沙尼亚", "埃塞俄比亚", "福克兰群岛", "法罗群岛", "斐济", "芬兰", "法国", "法属波利尼西亚", "法属西印度群岛", "加蓬", "冈比亚", "格鲁吉亚", "德国", "加纳", "直布罗陀", "希腊", "格陵兰", "格林纳达", "关岛", "危地马拉", "根西岛", "几内亚", "几内亚比绍", "圭亚那", "海地", "洪都拉斯", "香港", "匈牙利", "冰岛", "印度", "印度尼西亚", "伊朗", "伊拉克", "爱尔兰", "马恩岛", "以色列", "意大利", "牙买加", "日本", "泽西岛", "约旦", "哈萨克斯坦", "肯尼亚", "基里巴斯", "科索沃", "科威特", "吉尔吉斯斯坦", "老挝", "拉脱维亚", "黎巴嫩", "莱索托", "利比里亚", "利比亚", "列支敦士登", "立陶宛", "卢森堡", "澳门", "马其顿", "马达加斯加", "马拉维", "马来西亚", "马尔代夫", "马里", "马耳他", "马绍尔群岛", "毛里塔尼亚", "毛里求斯", "墨西哥", "密克罗尼西亚", "摩尔多瓦", "摩纳哥", "蒙古", "黑山", "蒙特塞拉特", "摩洛哥", "莫桑比克", "缅甸", "纳米比亚", "瑙鲁", "尼泊尔", "荷兰", "荷属安的列斯", "新喀里多尼亚", "新西兰", "尼加拉瓜", "尼日尔", "尼日利亚", "朝鲜", "挪威", "阿曼", "巴基斯坦", "帕劳", "巴勒斯坦", "巴拿马", "巴布亚新几内亚", "巴拉圭", "秘鲁", "菲律宾", "波兰", "葡萄牙", "波多黎各", "卡塔尔", "留尼汪", "罗马尼亚", "俄罗斯", "卢旺达", "圣皮埃尔和密克隆", "萨摩亚", "圣马力诺", "圣多美和普林西比", "沙特阿拉伯", "塞内加尔", "塞尔维亚", "塞舌尔", "塞拉利昂", "新加坡", "斯洛伐克", "斯洛文尼亚", "所罗门群岛", "索马里", "南非", "韩国", "南苏丹", "西班牙", "斯里兰卡", "圣基茨和尼维斯", "圣卢西亚", "圣文森特", "苏丹", "苏里南", "斯威士兰", "瑞典", "瑞士", "叙利亚", "台湾", "塔吉克斯坦", "坦桑尼亚", "泰国", "东帝汶", "多哥", "汤加", "特立尼达和多巴哥", "突尼斯", "土耳其", "土库曼斯坦", "特克斯和凯科斯群岛", "图瓦卢", "乌干达", "乌克兰", "阿拉伯联合酋长国", "英国", "美利坚合众国", "乌拉圭", "乌兹别克斯坦", "瓦努阿图", "梵蒂冈城", "委内瑞拉", "越南", "美属维尔京群岛", "也门", "赞比亚", "津巴布韦"];

function autocomplete(inp, arr) {
  /* 自动完成函数接受两个参数，
  文本字段元素和可能的自动完成值的数组：*/
  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) {
        /* 如果按下箭头向下键，
        增加 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) {
          /* 并模拟对“活动”项目的单击：*/
          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);
    /* 添加类“autocomplete-active”：*/
    x[currentFocus].classList.add("autocomplete-active");
  }
  function removeActive(x) {
    /* 从所有自动完成项目中删除“活动”类的函数：*/
    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);
});
}