JavaScript组件开发之输入框加候选框


Posted in Javascript onMarch 10, 2017

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.效果图

JavaScript组件开发之输入框加候选框 

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>
Javascript 相关文章推荐
JS图片预加载 JS实现图片预加载应用
Dec 03 Javascript
屏蔽网页右键复制和ctrl+c复制的js代码
Jan 04 Javascript
js获得地址栏?问号后参数的方法
Aug 08 Javascript
js过滤特殊字符输入适合输入、粘贴、拖拽多种情况
Mar 22 Javascript
一个JS函数搞定网页标题(title)闪动效果
May 13 Javascript
js取得html iframe中的元素和变量值
Jun 30 Javascript
jQuery EasyUI datagrid实现本地分页的方法
Feb 13 Javascript
检测一个函数是否是JavaScript原生函数的小技巧
Mar 13 Javascript
JS实现的文件拖拽上传功能示例
May 21 Javascript
vue.js配合$.post从后台获取数据简单demo分享
Aug 11 Javascript
详解nuxt 微信公众号支付遇到的问题与解决
Aug 26 Javascript
Vue函数式组件的应用实例详解
Aug 30 Javascript
原生javascript移动端滑动banner效果
Mar 10 #Javascript
jQuery弹出窗口简单实现代码
Mar 09 #Javascript
JavaScript实现弹窗效果代码分析
Mar 09 #Javascript
详解Vue方法与事件
Mar 09 #Javascript
Vue实现自带的过滤器实例
Mar 09 #Javascript
Vue中fragment.js使用方法详解
Mar 09 #Javascript
JavaScript编写一个贪吃蛇游戏
Mar 09 #Javascript
You might like
用js进行url编码后用php反解以及用php实现js的escape功能函数总结
2010/02/08 PHP
php实现等比例不失真缩放上传图片的方法
2016/11/14 PHP
用php+ajax新建流程(请假、进货、出货等)
2017/06/11 PHP
Javascript var变量隐式声明方法
2009/10/19 Javascript
如何使用json在前后台进行数据传输实例介绍
2013/04/11 Javascript
js动态设置鼠标事件示例代码
2013/10/30 Javascript
javascript实现超炫的向上滑行菜单实例
2015/08/03 Javascript
jQuery实现立体式数字动态增加(animate方法)
2016/12/21 Javascript
javascript实现文字无缝滚动
2016/12/27 Javascript
XMLHttpRequest对象_Ajax异步请求重点(推荐)
2017/09/28 Javascript
Angular.js实现获取验证码倒计时60秒按钮的简单方法
2017/10/18 Javascript
浅谈js获取ModelAndView值的问题
2018/03/28 Javascript
JavaScript读写二进制数据的方法详解
2018/09/09 Javascript
jQuery实现点击旋转,再点击恢复初始状态动画效果示例
2018/12/11 jQuery
vue-cli3中vue.config.js配置教程详解
2019/05/29 Javascript
Vue.js中的extend绑定节点并显示的方法
2019/06/20 Javascript
js图片查看器插件用法示例
2019/06/22 Javascript
微信公众号服务器验证Token步骤图解
2019/12/30 Javascript
javascript使用Blob对象实现的下载文件操作示例
2020/04/18 Javascript
9个JavaScript日常开发小技巧
2020/10/06 Javascript
Node 使用express-http-proxy 做api网关的实现
2020/10/15 Javascript
[02:51]DOTA2 Supermajor小组分组对阵抽签仪式
2018/06/01 DOTA
python用Pygal如何生成漂亮的SVG图像详解
2017/02/10 Python
python3中set(集合)的语法总结分享
2017/03/24 Python
使用Python制作自动推送微信消息提醒的备忘录功能
2018/09/06 Python
在python中以相同顺序shuffle两个list的方法
2018/12/13 Python
使用opencv识别图像红色区域,并输出红色区域中心点坐标
2020/06/02 Python
Python如何定义接口和抽象类
2020/07/28 Python
领先的英国注册在线药房 :Simply Meds Online
2019/03/28 全球购物
澳大利亚100%丝绸多彩度假装商店:TheSwankStore
2019/09/04 全球购物
Aurora London官网:奢华、负担得起的皮革手袋
2020/08/01 全球购物
小学运动会表扬稿
2014/01/19 职场文书
北京奥运会主题口号
2014/06/13 职场文书
房屋授权委托书范本
2014/10/07 职场文书
公司聚餐通知
2015/04/22 职场文书
苹果电脑mac os中货币符号快捷输入
2022/02/17 杂记