No dependent ComboBox component (AutoComplete component)

The home page of wagang.net requires a ComboBox component (AutoComplete ).
Qwrap contains a: http://dev.qwrap.com/resource/js/wagang/combobox/_examples/ComboBox-Demo.html,
However, this component is developed based on qwrap. However, I only want to reference a component, instead of introducing a qwrap library.
Fortunately, the Helper specification is used for qwrap database stacking. Many methods are static methods and can be independent of the method granularity.
Therefore, you can customize a dependency-free ComboBox component Code This saves network traffic and improves user experience.
OK, so let's start a journey without dependency.

Qwrap recommends that component developers use static methods and define static methods referenced externally at the beginning of the component closure. This code reflects its dependency on qwrap.
This code is also equivalent to a piece of adaptive code. If you want to change to dependent on another database, you only need to adapt this code to another database.

The full code of ComboBox can be seen here: http://dev.qwrap.com/resource/js/wagang/combobox/combobox.js
Here, the adaptation code is as follows:View code

   VaR Mix  =  QW. objecth. Mix,
Domu  =  QW. domu,
Createelement  =  Domu. createelement,
Eventh  =  QW. eventh,
Target  =  Eventh. gettarget,
Keycode  =  Eventh. getkeycode,
Preventdefault  = Eventh. preventdefault,
Custevent  =  QW. custevent,
Nodeh  =  QW. nodeh,
Addclass  =  Nodeh. addclass,
Removeclass  =  Nodeh. removeclass,
Setstyle  =  Nodeh. setstyle,
Getxy  =  Nodeh. getxy,
Ancestornode  = Nodeh. ancestornode,
On  =  QW. eventtargeth. addeventlistener,
Isie  =  (  /  MSIE  /  I). Test (navigator. useragent ); 

Observe the above code and we can see that except for custevent, this depends on the entire module, rather than accurate to the method level, and others are accurate to the method level.

Custevent is a custom event that the module's JS (http://dev.qwrap.com/resource/js/core/custevent.h.js), Yui compresses after about 1.5 K. Not big.
However, this K can also be saved.
Because the custom events required by the wagang.net homepage do not require multiple heads. Onxxx = function () {} is enough.

In addition, the getxy method has several hundred bytes of browser-compatible code. You can also change the absolute positioning method to adjust the DOM structure to locate it to save code.
Therefore, the adaptation code after solo becomes like this:View code

   VaR  Mix  =  Function  (DES, Src ){
  For  (  VaR  I  In  SRC ){
Des [I]  = SRC [I];
}
},
  //  Domu = QW. domu,  
  Createelement  =  Function  (Tagname, property ){
  VaR  El  =  Document. createelement (tagname );
  If  (Property ){
  For (  VaR  I  In  Property) El [I]  =  Property [I];
}
  Return  El;
},
  //  Eventh = QW. eventh,  
  Target  =  Function  (E ){
E =  E  |  Window. event;
  Return  E.tar get  |  E. srcelement;
},
Keycode  =  Function  (E ){
E  =  E  |  Window. event;
  Return E. Which  |  E. keycode  |  E. charcode;
},
Preventdefault  =  Function  (E ){
E  =  E  |  Window. event;
E. preventdefault  &&  E. preventdefault ()  | (E. returnvalue  =     False  );
},
  //  Custevent = QW. custevent,  
    //  Nodeh = QW. nodeh,  
  Hasclass  =  Function  (EL, CN ){
 Return     New  Regexp (  '  (? : ^ | \ S)  '     +  CN  +     '  (? : \ S | $)  '  ,  '  I '  ). Test (El. classname );
},
Addclass  =  Function  (EL, CN ){
  If  (  !  Hasclass (El, CN )){
El. classname  =  (EL. classname  +     '     ' +  CN). Replace (  /  ^ \ S + | \ s + $  /  G,  ""  );
}
},
Removeclass  =  Function  (EL, CN ){
  If  (Hasclass (El, CN )){
El. classname  =  El. classname. Replace ( New  Regexp (  '  (? : \ S | ^)  '     +  CN  +     '  (? : \ S | $)  '  ,  '  I  '  ), '     '  ). Replace (  /  ^ \ S + | \ s + $  /  G,  ""  );
}
},
  //  Setstyle = nodeh. setstyle,  
    //  Getxy = nodeh. getxy. Because the compatible code of getxy is very long, when there is no dependency, you can adjust it slightly without using the location, instead of using the DOM structure to locate it. 
  Ancestornode  =  Function  (EL, tagname ){
  While  (El  =  El. parentnode ){
  If  (EL. tagname  =  Tagname)  Return  El;
}
  Return    Null  ;
},
On  =  Function  (Element, name, Handler ){
Element. addeventlistener  &&  Element. addeventlistener (name, handler,  False  )
  |  Element. attachevent  &&  Element. attachevent (  ' On  '     +  Name, Handler );
},
Isie  =  (  /  MSIE  /  I). Test (navigator. useragent ); 

The Code is as follows:
Http://dev.qwrap.com/resource/js/wagang/combobox/_examples/ComboBox-WaGang.net.html

In the ComboBox. js part of solo, only4.7 K, Enough to meet the requirements.

The above is just a brief description of the no-dependency process of the qwrap component.
Because the qwrap framework uses the Helper specification to pile up databases, components developed based on helper are easily converted into non-dependent components.
This is one of the original intentions of qwrap:It serves component developers and allows them to develop components based on qwrap and release components without dependency..

Appendix:
In the above Code, the ComboBox component mentioned comes from: http://dev.qwrap.com/resource/js/wagang/combobox/_examples/ComboBox-Demo.html
Independent ComboBox component, applied to the wagang.net homepage: http://www.wagang.net
For more information, see: http://dev.qwrap.com/resource/js/wagang/_index.html