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>

您可能感兴趣的文章:

JS中类的静态方法，静态变量，实例方法，实例变量区别与用法实例分析
这篇文章主要介绍了JS中类的静态方法，静态变量，实例方法，实例变量区别与用法,结合实例形式详细分析了JS中类的静态方法，静态变量，实例方法，实例变量相关功能、使用方法及操作注意事项,需要的朋友可以参考下
2020-03-03
基于JavaScript实现飘落星星特效
这篇文章主要为大家详细介绍了基于JavaScript实现飘落星星特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-08-08
Boostrap入门准备之border box
之前在学习Bootstrap的过程中，遇到各种奇葩的坑，如果在学习bootstrap之前，准备工作先做好，就可以或多或少的避开一些坑。下面小编开始给大家介绍border-box这个属性的知识。感兴趣的朋友一起学习吧
2016-05-05
javascript异步编程
如果编程加入了时间的概念就一切变得非常复杂。通常我们的程序是飞快地解析执行，一毫秒紧接着一毫秒，从上至下地执行，这称之为同步。但如果我们想让后台的程序不等前面的程序执行，就执行呢，于是就有了异步的概念。
2010-06-06
父页面iframe中的第三方子页面跨域交互技术—postMessage实现方法
web网站通过iframe嵌入第三方web页面，父页面和子页面如果需要数据交互，显然违反了同源策略，在HTML5标准引入的window对象下的postMessage方法，可以允许来自不同源的JavaScript脚本采用异步方式进行有限的通信，可以实现跨文本档、多窗口、跨域消息传递...
2023-06-06
原生js验证简洁注册登录页面
这篇文章主要为大家详细介绍了原生js验证简洁美观注册登录页面的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-12-12
JavaScript中为事件指定处理程序的五种方式分析
这篇文章主要介绍了JavaScript中为事件指定处理程序的五种方式,结合实例形式简单分析了JavaScript事件处理的相关原理与事件指定处理程序的五种常用方式,需要的朋友可以参考下
2018-07-07
JS获取屏幕高度的简单实现代码
下面小编就为大家带来一篇JS获取屏幕高度的实现代码。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-05-05
js的.innerHTML = ""IE9下显示有错误的解决方法
js的.innerHTML= "……"在ie9- 的版本显示不正常，使用jquery可以解决，有类似问题的朋友可以参考下
2013-09-09
uniapp微信小程序获取当前城市名称逆地址解析实例教程
最近在用uni-app开发小程序,需要获取用户所在城市,小程序本身没有这样的api,那么怎么实现呢?下面这篇文章主要给大家介绍了关于uniapp微信小程序获取当前城市名称逆地址解析的相关资料,需要的朋友可以参考下
2022-11-11