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 相关文章推荐
浏览器无法运行JAVA脚本的解决方法
Jan 09 Javascript
jQuery弹出层插件简化版代码下载
Oct 16 Javascript
js实现动态添加、删除行、onkeyup表格求和示例
Aug 18 Javascript
location.href用法总结(最主要的)
Dec 27 Javascript
png在IE6 下无法透明的解决方法汇总
May 21 Javascript
jquery.form.js框架实现文件上传功能案例解析(springmvc)
May 26 Javascript
使用JavaScriptCore实现OC和JS交互详解
Mar 28 Javascript
使用JS获取SessionStorage的值
Jan 12 Javascript
security.js实现的RSA加密功能示例
Jun 06 Javascript
实例详解Vue项目使用eslint + prettier规范代码风格
Aug 20 Javascript
VUE2.0+ElementUI2.0表格el-table实现表头扩展el-tooltip
Nov 30 Javascript
JavaScript实现滚动加载更多
Dec 27 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
PHP中CURL方法curl_setopt()函数的参数分享
2013/01/19 PHP
thinkphp常见路径用法分析
2014/12/02 PHP
PHP 布尔值的自增与自减的实现方法
2018/05/03 PHP
thinkphp5使html5实现动态跳转的例子
2019/10/16 PHP
表单填写时用回车代替TAB的实现方法
2007/10/09 Javascript
UserData用法总结 lanyu出品
2010/07/01 Javascript
让innerText在firefox火狐和IE浏览器都能用的写法
2011/05/14 Javascript
javascript实现促销倒计时+fixed固定在底部
2013/09/18 Javascript
原生javascript实现获取指定元素下所有后代元素的方法
2014/10/28 Javascript
jQuery中的编程范式详解
2014/12/15 Javascript
探索Javascript中this的奥秘
2016/12/11 Javascript
微信小程序通过api接口将json数据展现到小程序示例
2017/01/20 Javascript
微信小程序 flex实现导航实例详解
2017/04/26 Javascript
vue音乐播放器插件vue-aplayer的配置及其使用实例详解
2017/07/10 Javascript
JavaScript中常见内置函数用法示例
2018/05/14 Javascript
JS中DOM元素的attribute与property属性示例详解
2018/09/04 Javascript
vue.js 实现a标签href里添加参数
2019/11/12 Javascript
使用typescript改造koa开发框架的实现
2020/02/04 Javascript
vue-cli3配置favicon.ico和title的流程
2020/10/27 Javascript
微信小程序canvas实现签名功能
2021/01/19 Javascript
[47:53]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#2COL VS Spirit
2016/03/02 DOTA
Python struct.unpack
2008/09/06 Python
python益智游戏计算汉诺塔问题示例
2014/03/05 Python
使用Python实现下载网易云音乐的高清MV
2015/03/16 Python
Python解析json之ValueError: Expecting property name enclosed in double quotes: line 1 column 2(char 1)
2017/07/06 Python
python中MethodType方法介绍与使用示例
2017/08/03 Python
python定时按日期备份MySQL数据并压缩
2019/04/19 Python
三步实现Django Paginator分页的方法
2019/06/11 Python
python实现自动化上线脚本的示例
2019/07/01 Python
pytorch中的自定义反向传播,求导实例
2020/01/06 Python
Python字符串split及rsplit方法原理详解
2020/06/29 Python
解决Python3.7.0 SSL低版本导致Pip无法使用问题
2020/09/03 Python
中学生社会实践活动总结
2014/07/03 职场文书
幼儿园秋季开学寄语
2014/08/02 职场文书
Apache Hudi数据布局黑科技降低一半查询时间
2022/03/31 Servers
JavaScript实现九宫格拖拽效果
2022/06/28 Javascript