JS实现联想自动补齐功能
<!DOCTYPE HTML>
<html>
<head>
<meta charset = "utf-8">
<title>JS实现联想自动补齐功能</title>
<style>
* { box-sizing: border-box; }
#container{ position:relative;
top:50px;
left:30%;
/*为了好看一点定个位*/ }
form{
padding:6px;
position:absolute;
top:200px;
left:50px;
}
#search{
border: 1px solid transparent;
background-color: #f1f1f1;
padding: 10px;
font-size: 16px;
}
button{
background-color: DodgerBlue;
color: #fff;
width:60px;
height:40px;
padding:10px;
}
//好了虽然丑了点,更能还是有了
.listclass {
position: absolute;
border: 1px solid #d4d4d4;
border-bottom: none;
border-top: none;
z-index: 99; top: 100%;
left: 0;
right: 0;
}
.listclass div {
padding: 10px;
cursor: pointer;
background-color: #fff;
border-bottom: 1px solid #d4d4d4;
}
.listclass div:hover { background-color: #e9e9e9;
}
.listactive { background-color: DodgerBlue !important;
color: #ffffff;
}
</style>
</head>
<body>
<div id="container">
<h3>HTML5的表单是有自动不全功能的,(所以可以只做输入和数据对比过滤就可以)<h3>
<h3>这里我们先把补齐更能关闭了用autocomplete属性来实现</h3>
<form autocomplete="off" action="https://www.baidu.com/s?" id> <div >
<input id="search" name="search" placeholder="输入国家或者地区的英文名">
<button type="submit" >提交</button>
</div> </form>
</div>
<script>
//筛选函数
function search(arr){
//将数据传入,预处理一下 var currentFocus;//用来计算输入几个
var inp=document.getElementById("search");
//当输入时,开始筛选,注册一个输入
inp.addEventListener("input",function(event){
var a,b,i,val=this.value;
//当失去焦点后关闭下拉列表
closeAll();
if(!val){return false;}
currentFocus=-1;
//把数据例表搞出来
a=document.createElement("div");
a.setAttribute("id",this.id+"list");
a.setAttribute("class","listclass");
//添加这个div
inp.parentNode.appendChild(a);
//开始循环匹配数据
for(i=0;i<arr.length;i++){
//这个只能顺序匹配,匹配第一个后第二个有效继续,无效为空,
if (arr[i].substr(0, val.length).toUpperCase() == val.toUpperCase()) {
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] + "'>";
b.addEventListener("click", function(e) { inp.value = this.getElementsByTagName("input")[0].value;
console.log(this)
closeAll();
});
a.appendChild(b);
}
}
});
//按键按下时将数据放到输入框
inp.addEventListener("keydown", function(e) {
var x = document.getElementById(this.id + "list");
if (x) x = x.getElementsByTagName("div");
if (e.keyCode == 40) {
currentFocus++;
addActive(x);
} else if (e.keyCode == 38) {
currentFocus--;
addActive(x);
} else if (e.keyCode == 13) {
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); x[currentFocus].classList.add("listactive");
}
//输入框删除已经输入的字符,往后匹配
function removeActive(x) { for (var i = 0; i < x.length; i++) {
x[i].classList.remove("listactive");
}
}
//失去焦点就关闭列表
function closeAll(elmnt) {
//全部删去
var x = document.getElementsByClassName("listclass");
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) {
closeAll(e.target);
}); } //数据
var countries = ["Afghanistan","Albania","Algeria","Andorra","Angola","Anguilla","Antigua & Barbuda","Argentina","Armenia","Aruba","Australia","Austria","Azerbaijan","Bahamas","Bahrain","Bang ladesh","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","Gu am","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","Lithua nia","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"]; /*运行一下函数*/
search(countries);
</script>
</body>
</html>
JS实现联想自动补齐功能的更多相关文章
- HTML5的数据自动补齐功能
使用datalist元素,HTML5允许使用一组数据来生成自动补齐功能,现在你不需要使用第三方js代码或者类库啦! <input name="frameworks" list ...
- CocoaPods 导入第三方库头文件自动补齐
使用了一段时间CocoaPods来管理Objective-c的类库,方便了不少.但是有一个小问题,当我在xcode输入import关键字的时候,没有自动联想补齐代码的功能,需要手工敲全了文件名,难以适 ...
- CocoaPods导入第三方库头文件自动补齐
使用了一段时间CocoaPods来管理Objective-c的类库,方便了不少.但是有一个小问题,当我在xcode输入import关键字的时候,没有自动联想补齐代码的功能,需要手工敲全了文件名,难以适 ...
- CentOS7自动补齐
cenos7,最小安装,做服务器嘛.但是发现tab键的自动补齐功能没有:其实可以直接把centos7作为yum源,然后直接安装bash-completion yum install -y bash- ...
- Docker笔记7:Docker 命令自动补齐
经常大家会碰到这种现象,Docker 已经安装好了,但是使用 docker 命令时 不能自动补齐,即输入 docker 命令后,按 Tab 键无法列出子命令(或参数)的候选项. [机制] Linux ...
- 为Debian/Ubuntu的apt-get install添加自动补齐/完成功能
Debian/Ubuntu的apt-get太常用了,不过偶尔可能也会碰到不太熟悉,想不起来的包的名称,除了去debian packages去查找,另外的方法就是给Debian/Ubuntu添加自动补齐 ...
- GBin1插件推荐之马可波罗(Marco Polo),jQuery的自动补齐插件 - Autocomplete Plugin
让我们Google一下"jQuery autocomplete plugin"(jquery自动补齐插件).在过去的4年中,我已经Google了很多次这个组合了.然而结果并没有变化 ...
- mac下 netbeans 8.02中文版设置代码自动补齐 + eclipse自动补齐
netbeans自带的自动补齐快捷键是commad+\ 我想要的是在输入的时候,有自动提示,找了半天也没找到怎么搞. 因为我是用的mac系统 后来参考其他的设置,找到了设置的方法,把这个方法记录一下. ...
- 关闭浏览器输入框自动补齐 兼容IE,FF,Chrome等主流浏览器
这篇文章主要介绍了关闭浏览器输入框自动补齐 兼容IE,FF,Chrome等主流浏览器,需要的朋友可以参考下.希望对大家有所帮助 Firefox 和 IE 的浏览器各自实现了input历史记录的功能 ...
随机推荐
- Ubuntu Bonding(16.04网卡绑定)
UbuntuBonding(网卡绑定) 绑定,也称为端口聚合或链路聚合,意味着将多个网络接口(NIC)组合到单个链路,从而提供高可用性,负载平衡,最大吞吐量或这些组合.注意bonding只能提供链路监 ...
- Facebook下载总结
Facebook是美国的一个社交网络服务网站,至今注册用户已超越20亿,月活用户更是惊人的突破3亿. 这样庞大的一个社交类网站,每日产生的社交数据当然也是非常可观,而这些社交数据,更接近口语,所以是比 ...
- vuex requires a Promise polyfill in this browser.--ie-vue-兼容处理日记
1.ie9+报错vuex requires a Promise polyfill in this browser. 解决如下: npm install --save-dev -polyfill 修改c ...
- BZOJ2690: 字符串游戏(平衡树动态维护Dfs序)
Description 给定N个仅有a~z组成的字符串ai,每个字符串都有一个权值vi,有M次操作,操作分三种: Cv x v':把第x个字符串的权值修改为v' Cs x a':把第x个字符串修改成a ...
- django项目所遇问题总结
2. 关于设置static静态文件,样式失效问题 原因: 可能开启多个端口号,页面显示访问的不是已经设置了static的模板,所以,样式没有显示 3. models模型中gender字段的选择设置 c ...
- which---查找并显示给定命令的绝对路径
which命令用于查找并显示给定命令的绝对路径,环境变量PATH中保存了查找命令时需要遍历的目录.which指令会在环境变量$PATH设置的目录里查找符合条件的文件.也就是说,使用which命令,就可 ...
- JQ遍历 input 并修改name属性
1.执行完克隆行后,会出现name属相相同的问题 function addRow(){ var obj = $("tr[name='info']:last"); var objCl ...
- LRJ入门经典-0905邮票和信封305
原题 LRJ入门经典-0905邮票和信封305 难度级别:B: 运行时间限制:1000ms: 运行空间限制:256000KB: 代码长度限制:2000000B 试题描述 假定一张信封最多贴5张邮票,如 ...
- Cocos2d-x游戏的一般验证分析
Coco2d-x引擎是相对于Unity3D的又一实力派引擎.尽管随着3D游戏的热门,很多其它的厂商偏向于Unity3D.可是Coco2d-x的普及量也不容小觑,特别是一些比較大的手游公司.比方触控科技 ...
- Erlang简单并行server
Erlang简单并行服务器 (金庆的专栏) Erlang并行服务器为每一个Tcp连接创建相应的连接进程,处理client数据. 參考 Erlang程序设计(第2版)17.1.3 顺序和并行服务器 并行 ...