JavaScript组件开发之输入框加候选框_网络技术_宿州市腾雀网络科技有限公司

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

发布时间 - 2026-01-11 00:05:51 点击率：次

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 # 输入框加候选框 # javascript # 输入框 # Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件 # Vue.js数字输入框组件使用方法详解 # JS 仿支付宝input文本输入框放大组件的实例 # JS通过正则限制 input 输入框只能输入整数、小数(金额或者现金) 两位小数 # js与jquery实时监听输入框值的oninput与onpropertychange方法 # js监听输入框值的即时变化onpropertychange、oninput # JS实现在网页中弹出一个输入框的方法 # js动态修改input输入框的type属性(实现方法解析) # js监听input输入框值的实时变化实例 # JavaScript实现一个输入框组件 # 主要是 # 空白处 # 模式下 # visibility # style # datalist # innerHTML # LI # hidden # body # document # click

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：swoole能做|直播|吗

下一篇：在免费五站合一建站系统中，域名绑定的具体步骤是什么？

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：swoole能做|直播|吗

下一篇：在免费五站合一建站系统中，域名绑定的具体步骤是什么？