JavaScript组件开发之输入框加候选框
更新时间：2017年03月10日 08:39:13 作者：浪漫不属意
本文给大家分享基于js组件开发的输入框加候选框的实例代码，代码简单易懂，非常不错，具有参考借鉴价值，需要的的朋友参考下
1.兼容ie8 主要是事件兼容
var EventUtil = {
on:function(elem,type,handler){
if(elem.addEventListener){
elem.addEventListener(type,handler,false);
}else if(elem.attachEvent){
elem.attachEvent("on"+type,handler);
}
},
getEvent:function(event){
return event||window.event;
},
getTarget:function(event){
return event.target||event.srcElement;
},
getCharCode:function(event){
if(typeof event.handler == "number"){
return event.charCode;
}else{
return event.keyCode;
}
}
}
2.对于候选框里面的内容使用事件代理，以及点击空白处消失
EventUtil.on(document.body,'click',function(e){
stopPropagation(e);
if(EventUtil.getTarget(e).nodeName=='BODY'){
datalist.style.visibility = 'hidden';
datalist.innerHTML ='';
}
if(EventUtil.getTarget(e).nodeName == "LI"){
input.value = EventUtil.getTarget(e).innerHTML;
datalist.style.visibility = 'hidden';
datalist.innerHTML ='';
}
})
3.兼容模式下的防止冒泡
function stopPropagation(e){
e = window.event||e;
if(document.all){
e.cancelBubble = true;
}else{
e.stopPropagation();
}
}
4.效果图
5.完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
html,body{margin: 0;padding: 0;height: 100%;width: 100%;}
input{
width: 200px;
border:1px solid grey;
padding: 0 2px;
line-height: 1.5rem;
box-sizing: border-box;
outline: none;
}
ul{
margin:0;
width: 200px;
padding: 0;
list-style: none;
box-sizing: border-box;
padding: 1px;
border:1px solid;
border-color: grey;
visibility: hidden;
}
li{
line-height: 1.5rem;
padding: 0 0 0 1px;
}
li:hover{
background-color: grey;
}
.section{
top:30%;
left:50%;
position: absolute;
margin-left: -100px;
}
</style>
</head>
<body>
<div class="section">
<input id="search"/>
<ul id="datalist">
</ul>
</div>
</body>
<script type="text/javascript">
var EventUtil = {
on:function(elem,type,handler){
if(elem.addEventListener){
elem.addEventListener(type,handler,false);
}else if(elem.attachEvent){
elem.attachEvent("on"+type,handler);
}
},
getEvent:function(event){
return event||window.event;
},
getTarget:function(event){
return event.target||event.srcElement;
},
getCharCode:function(event){
if(typeof event.handler == "number"){
return event.charCode;
}else{
return event.keyCode;
}
}
}
function stopPropagation(e){
e = window.event||e;
if(document.all){
e.cancelBubble = true;
}else{
e.stopPropagation();
}
}
var input = document.getElementById('search');
var datalist = document.getElementById('datalist');
var list_array = ['aa','aab','abc'];
function generatelist(array){
var _innerHTML = '';
for (var i = 0; i < array.length; i++) {
_innerHTML += '<li>'+array[i]+'</li>';
}
datalist.innerHTML = _innerHTML;
}
function findInArray(s){
var filter_array = [];
if(s!=''){
for (var i = 0; i < list_array.length; i++) {
if(list_array[i].indexOf(s)===0){
filter_array.push(list_array[i])
}
}
}
return filter_array;
}
input.onkeyup = function(){
var new_array = findInArray(this.value);
generatelist(new_array);
if(new_array.length>0){
setTimeout(function(){datalist.style.visibility = 'visible';},0);
}else{
setTimeout(function(){datalist.style.visibility = 'hidden';},0);
}
}
EventUtil.on(document.body,'click',function(e){
stopPropagation(e);
if(EventUtil.getTarget(e).nodeName=='BODY'){
datalist.style.visibility = 'hidden';
datalist.innerHTML ='';
}
if(EventUtil.getTarget(e).nodeName == "LI"){
input.value = EventUtil.getTarget(e).innerHTML;
datalist.style.visibility = 'hidden';
datalist.innerHTML ='';
}
})
</script>
</html>
您可能感兴趣的文章:
相关文章
require.js与bootstrap结合实现简单的页面登录和页面跳转功能
这篇文章主要介绍了require.js与bootstrap结合实现简单的页面登录和页面跳转功能,需要的朋友可以参考下2017-05-05
这篇文章主要介绍了JS回调函数简单用法,结合实例形式分析了js回调函数的定义与简单使用方法,具有一定参考借鉴价值,需要的朋友可以参考下2017-02-02
这篇文章主要介绍了js验证上传图片的方法,可对上传图片的类型、大小等进行限制,非常简单实用,需要的朋友可以参考下2015-05-05
在javascript中，String的函数replace()简直太让人喜爱了。它灵活而强大的字符替换处理能力，让我不禁想向大家介绍它。2008-10-10
当我们想在页面加载之后执行某个函数，肯定会想到onload了 但onload在浏览器看来，就是页面上的东西全部都加载完毕后才能发生，但那就为时已晚了。2008-07-07
这篇文章主要为大家详细介绍了js实现前端图片即时预览功能，本地预览功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-08-08
浅谈typescript中keyof与typeof操作符用法
本文主要介绍了typescript中keyof与typeof操作符用法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-06-06
JavaScript中window和document用法详解
这篇文章主要介绍了JavaScript中window和document用法详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-07-07
这篇文章主要介绍了使用JavaScript轻松实现拖拽功能,让你的网页动起来,文中通过代码示例讲解的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下2024-06-06
这篇文章主要帮助大家学习并熟练掌握JavaScript中this的使用技巧，感兴趣的小伙伴们可以参考一下2016-08-08
最新评论