JS实现联想、自动补齐国家或地区名称的功能


Posted in Javascript onJuly 07, 2020

1.JS部分

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;
   /*创建列表*/
   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);
     /*insert a input field that will hold the current array item's value:*/
     b.innerHTML += "<input type='hidden' value='" + arr[i] + "'>";
     /*execute a function when someone clicks on the item value (DIV element):*/
     b.addEventListener("click", function(e) {
       /*insert the value for the autocomplete text field:*/
       inp.value = this.getElementsByTagName("input")[0].value;
       /*close the list of autocompleted values,
       (or any other open lists of autocompleted values:*/
       closeAllLists();
     });
     a.appendChild(b);
    }
   }
 });
 /*execute a function presses a key on the keyboard:*/
 inp.addEventListener("keydown", function(e) {
   var x = document.getElementById(this.id + "autocomplete-list");
   if (x) x = x.getElementsByTagName("div");
   if (e.keyCode == 40) {
    /*If the arrow DOWN key is pressed,
    increase the currentFocus variable:*/
    currentFocus++;
    /*and and make the current item more visible:*/
    addActive(x);
   } else if (e.keyCode == 38) { //up
    /*If the arrow UP key is pressed,
    decrease the currentFocus variable:*/
    currentFocus--;
    /*and and make the current item more visible:*/
    addActive(x);
   } else if (e.keyCode == 13) {
    /*If the ENTER key is pressed, prevent the form from being submitted,*/
    e.preventDefault();
    if (currentFocus > -1) {
     /*and simulate a click on the "active" item:*/
     if (x) x[currentFocus].click();
    }
   }
 });
 function addActive(x) {
  /*a function to classify an item as "active":*/
  if (!x) return false;
  /*start by removing the "active" class on all items:*/
  removeActive(x);
  if (currentFocus >= x.length) currentFocus = 0;
  if (currentFocus < 0) currentFocus = (x.length - 1);
  /*add class "autocomplete-active":*/
  x[currentFocus].classList.add("autocomplete-active");
 }
 function removeActive(x) {
  /*a function to remove the "active" class from all autocomplete items:*/
  for (var i = 0; i < x.length; i++) {
   x[i].classList.remove("autocomplete-active");
  }
 }
 function closeAllLists(elmnt) {
  /*close all autocomplete lists in the document,
  except the one passed as an argument:*/
  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]);
   }
  }
 }
 /*execute a function when someone clicks in the document:*/
 document.addEventListener("click", function (e) {
   closeAllLists(e.target);
   });
}

/*数组 - 包含所有国家或地区名*/
var countries = ["Afghanistan","Albania","Algeria","Andorra","Angola","Anguilla","Antigua & Barbuda","Argentina","Armenia","Aruba","Australia","Austria","Azerbaijan","Bahamas","Bahrain","Bangladesh","Barbados","Belarus","Belgium","Belize","Benin","Bermuda","Bhutan","Bolivia","Bosnia & 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 China","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 China","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 & 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 & Nevis","St Lucia","St Vincent","Sudan","Suriname","Swaziland","Sweden","Switzerland","Syria","Taiwan China","Tajikistan","Tanzania","Thailand","Timor L'Este","Togo","Tonga","Trinidad & Tobago","Tunisia","Turkey","Turkmenistan","Turks & 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"];

/*传递参数*/
autocomplete(document.getElementById("myInput"), countries);

2.CSS部分

* { box-sizing: border-box; }
body {
 font: 16px Arial; 
}
.autocomplete {
 /*the container must be positioned relative:*/
 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;
 /*position the autocomplete items to be the same width as the container:*/
 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 {
 /*when hovering an item:*/
 background-color: #e9e9e9; 
}
.autocomplete-active {
 /*when navigating through the items using the arrow keys:*/
 background-color: DodgerBlue !important; 
 color: #ffffff; 
}

3.HTML部分

<!-- 关闭自带的自动补全功能 -->
<form autocomplete="off" action="/action_page.php">
 <div class="autocomplete" style="width:300px;">
  <input id="myInput" type="text" name="myCountry" placeholder="输入国家或地区英文名...">
 </div>
 <input type="submit">
</form>

4.效果图

JS实现联想、自动补齐国家或地区名称的功能

以上就是JS实现联想、自动补齐国家或地区名称的功能的详细内容,更多关于JS 联想、自动补齐功能的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
Javascript实例教程(19) 使用HoTMetal(3)
Dec 23 Javascript
防止页面被iframe(兼容IE,Firefox火狐)
Jul 04 Javascript
html的DOM中document对象forms集合用法实例
Jan 21 Javascript
JavaScript分秒倒计时器实现方法
Feb 02 Javascript
javascript实现图片循环渐显播放的方法
Feb 24 Javascript
JS实现滑动门效果的方法详解
Dec 19 Javascript
Angular 4依赖注入学习教程之InjectToken的使用(八)
Jun 04 Javascript
深入理解requireJS-实现一个简单的模块加载器
Jan 15 Javascript
JS闭包经典实例详解
Dec 20 Javascript
JavaScript使用小插件实现倒计时的方法讲解
Mar 11 Javascript
vue3.0自定义指令(drectives)知识点总结
Dec 27 Vue.js
vuex的使用和简易实现
Jan 07 Vue.js
jQuery 动态粒子效果示例代码
Jul 07 #jQuery
Electron实现应用打包、自动升级过程解析
Jul 07 #Javascript
基于Electron实现桌面应用开发代码实例
Jul 07 #Javascript
基于javascript处理nginx请求过程详解
Jul 07 #Javascript
vue-i18n实现中英文切换的方法
Jul 06 #Javascript
vue 实现动态路由的方法
Jul 06 #Javascript
Nuxt配置Element-UI按需引入的操作方法
Jul 06 #Javascript
You might like
php设计模式 Composite (组合模式)
2011/06/26 PHP
php实现mysql数据库连接操作及用户管理
2015/11/08 PHP
Yii实现显示静态页的方法
2016/04/25 PHP
PHP实现的网站目录扫描索引工具
2016/09/08 PHP
CakePHP框架Model关联对象用法分析
2017/08/04 PHP
php获取微信基础接口凭证Access_token
2018/08/23 PHP
js 新浪的一个图片播放图片轮换效果代码
2008/07/15 Javascript
屏蔽相应键盘按钮操作
2014/03/10 Javascript
浅析javascript 定时器
2014/12/23 Javascript
javascript中undefined与null的区别
2015/08/16 Javascript
JavaScript如何调试有哪些建议和技巧附五款有用的调试工具
2015/10/28 Javascript
基于JavaScript实现类似于百度学术高级检索功能
2016/03/02 Javascript
详解ES6中的let命令
2020/04/05 Javascript
nodejs基础知识
2017/02/03 NodeJs
pm2 部署 node的三种方法示例
2017/10/20 Javascript
vue cli 3.0 使用全过程解析
2018/06/14 Javascript
C#程序员入门学习微信小程序的笔记
2019/03/05 Javascript
JS实现放烟花效果
2020/03/10 Javascript
vue使用video插件vue-video-player详解
2020/10/23 Javascript
[02:16]DOTA2英雄基础教程 干扰者
2014/01/15 DOTA
[05:39]2014DOTA2国际邀请赛 DK晋级胜者组专访战队国士无双
2014/07/14 DOTA
[02:57]2014DOTA2国际邀请赛-观众采访
2014/07/19 DOTA
python中reload(module)的用法示例详解
2017/09/15 Python
分析python请求数据
2018/08/19 Python
利用python批量爬取百度任意类别的图片的实现方法
2020/10/07 Python
使用CSS3的box-sizing属性解决div宽高被内边距撑开的问题
2016/06/28 HTML / CSS
Sephora丝芙兰泰国官方网站:国际知名化妆品购物
2017/11/15 全球购物
超市5.1促销活动
2014/01/15 职场文书
三月雷锋月活动总结
2014/07/03 职场文书
2014县政府领导班子对照检查材料思想汇报
2014/09/25 职场文书
2014年政协委员工作总结
2014/12/01 职场文书
岳庙导游词
2015/02/04 职场文书
2015年乡镇卫生院妇幼保健工作总结
2015/05/19 职场文书
2015中学教师个人工作总结
2015/07/22 职场文书
创业计划书之干洗店
2019/09/10 职场文书
搭建Yolov5服务器
2022/04/30 Servers