JavaScript元件開發之輸入框加候選框的範例程式碼分享

本文跟大家分享基於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.完整程式碼

以上是JavaScript元件開發之輸入框加候選框的範例程式碼分享的詳細內容。更多資訊請關注PHP中文網其他相關文章！