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 相关文章推荐
ajax无刷新动态调用股票信息(改良版)
Nov 01 Javascript
javascript Array对象基础知识小结
Nov 16 Javascript
JavaScript高级程序设计(第3版)学习笔记12 js正则表达式
Oct 11 Javascript
javascript操作css属性
Dec 30 Javascript
pace.js页面加载进度条插件
Sep 29 Javascript
js控制div层的叠加简单方法
Oct 15 Javascript
浅谈jquery页面初始化的4种方式
Nov 27 Javascript
详解Angular路由 ng-route和ui-router的区别
May 22 Javascript
javascript计算渐变颜色的实例
Sep 22 Javascript
微信小程序实现点击按钮修改字体颜色功能【附demo源码下载】
Dec 05 Javascript
解决JS表单验证只有第一个IF起作用的问题
Dec 04 Javascript
Javascript中的奇葩知识,你知道吗?
Jan 25 Javascript
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解析xml方法实例详解
2015/05/12 PHP
php实现的中秋博饼游戏之绘制骰子图案功能示例
2017/11/06 PHP
laravel中数据显示方法(默认值和下拉option默认选中)
2019/10/11 PHP
form中限制文本字节数js代码
2007/06/10 Javascript
jscript之Read an Excel Spreadsheet
2007/06/13 Javascript
JQuery select控件的相关操作实现代码
2012/09/14 Javascript
JavaScript实现简单精致的图片左右无缝滚动效果
2017/03/16 Javascript
JavaScript数据结构之二叉树的查找算法示例
2017/04/13 Javascript
Vue2.0权限树组件实现代码
2017/08/29 Javascript
详解Javascript中new()到底做了些什么?
2018/03/29 Javascript
JS通过位运算实现权限加解密
2018/08/14 Javascript
js实现文件上传功能 后台使用MultipartFile
2018/09/08 Javascript
jQuery实现的模仿雨滴下落动画效果
2018/12/11 jQuery
JS使用canvas中的measureText方法测量字体宽度示例
2019/02/02 Javascript
详解Vue中的基本语法和常用指令
2019/07/23 Javascript
JS计算斐波拉切代码实例
2019/09/12 Javascript
小程序接入腾讯位置服务的详细流程
2020/03/03 Javascript
Element Alert警告的具体使用方法
2020/07/27 Javascript
Vue+Element自定义纵向表格表头教程
2020/10/26 Javascript
vue绑定class的三种方法
2020/12/24 Vue.js
Python multiprocessing模块中的Pipe管道使用实例
2015/04/11 Python
Python基于PyGraphics包实现图片截取功能的方法
2017/12/21 Python
Python实现k-means算法
2018/02/23 Python
关于python2 csv写入空白行的问题
2018/06/22 Python
python实现机器学习之多元线性回归
2018/09/06 Python
python框架Django实战商城项目之工程搭建过程图文详解
2020/03/09 Python
Python requests.post方法中data与json参数区别详解
2020/04/30 Python
python编写实现抽奖器
2020/09/10 Python
优衣库台湾官网:UNIQLO台湾
2019/02/01 全球购物
Crabtree & Evelyn欧盟:豪华洗浴、身体和护发
2021/03/09 全球购物
波兰运动鞋网上商店:Distance.pl
2020/07/30 全球购物
春季运动会广播稿大全
2014/02/19 职场文书
教师节活动主持词
2014/04/02 职场文书
2014年药房工作总结
2014/11/22 职场文书
pytorch 实现多个Dataloader同时训练
2021/05/29 Python
Netty结合Protobuf进行编解码的方法
2021/06/26 Java/Android