Sample code sharing of input box and candidate box in JavaScript component development-JS Tutorial-php.cn

Sample code sharing of input box and candidate box in JavaScript component development

黄舟

Release： 2017-03-21 14:30:34

Original

1245 people have browsed it

This article will share with you the example code of input box and candidate box developed based on js component. The code is simple and easy to understand, very good, and has reference value. Friends who need it can refer to it

1. Compatible with ie8, mainly eventscompatible

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;
    }
   }
  }

Copy after login

2. Use event proxy for the content in the candidate box, and click on the blank space to disappear

EventUtil.on(document.body,&#39;click&#39;,function(e){
   stopPropagation(e);
   if(EventUtil.getTarget(e).nodeName==&#39;BODY&#39;){
    datalist.style.visibility = &#39;hidden&#39;;
    datalist.innerHTML =&#39;&#39;;
   }
   if(EventUtil.getTarget(e).nodeName == "LI"){
    input.value = EventUtil.getTarget(e).innerHTML;
    datalist.style.visibility = &#39;hidden&#39;;
    datalist.innerHTML =&#39;&#39;;
   }
  })

Copy after login

3. Prevent bubbling in compatibility mode

 function stopPropagation(e){
   e = window.event||e;
   if(document.all){
    e.cancelBubble = true;
   }else{
    e.stopPropagation();
   }
  }

Copy after login

4. Rendering

Sample code sharing of input box and candidate box in JavaScript component development

5. Complete code

Copy after login

The above is the detailed content of Sample code sharing of input box and candidate box in JavaScript component development. For more information, please follow other related articles on the PHP Chinese website!