Asp tutorial. net autocomplete
<! Doctype html> <Head>
<Meta http-equiv = "content-type" content = "text/html; charset = gb2312">
<Title> combobox component (autocomplete component) </title>
<Meta name = "description" content = "wafangzhai": Navigate to the homepage. You can search by baidu or google on the same page without changing your usage habits, it provides more weather forecasts and other useful functions than the Baidu and google homepages. It is a very useful homepage for search engines and navigation. ">
<Meta name = "keywords" content = "shanzhai Baidu, shanzhai google, navigation home page, wafangzhai, navigation home page integrating Baidu and google search">
<Script type = "text/webpage effects">
If (location. host. tolowercase () = 'wagang. Net') location. href = 'http: // www.wagang.net ';
</Script>
<Style>
/* Reset font */
Html, body {}
Body {font: 13px/1.4 arial, helvetica, sans-serif; * font-size: small; * font: x-small; text-align: center ;}
Body, ul, ol, dl, dd, h1, h2, h3, h4, h5, h6, p, form, fieldset, legend, input, textarea, select, button, th, td {margin: 0; padding: 0 ;}
H1, h2, h3, h4, h5, h6 {font-size: 100%; font-weight: normal ;}
Table {font-size: inherit; font: 100% ;}
Input, select {font: 100% arial, helvetica, clean, sans-serif ;;}
Button {overflow: visible}
Th, em, strong, address, cite {font-style: normal; font-weight: normal ;}
Li {list-style: none ;}
Img, fieldset {border: 0 ;}
Ins {text-decoration: none ;}Body {font: 12px arial; text-align: center; background: # fff}
Body, p, form, ul {margin: 0; padding: 0}
Body, form, # fm {position: relative}
Img {border: 0}
A {color: # 00c}
# Nav {padding: 27px 0 0 0 ;}
# M, # wagang {width: Pixel px; margin: 0 auto}
. Nv {font-size: 16px; margin: 0 0 4px-51px}
. Nv a,. nv B, # su,. lk {font-size: 14px}
. Lg {margin: 15px 0 0px; height: 100px; overflow: hidden ;}
# Fm {padding-left: 100px; text-align: left}
# Kw {width: 391px; padding: 3px 1px; margin: 0 6px 0 0; font: 16px/16px arial}
# Su {width: 78px; height: 28px; line-height: 24px}
# Kw, # su {vertical-align: middle}
. Lk {margin: 33px 0 80px 0}
. Lh {margin: 16px 0 5px; font: 12px ""}
. Lh a {font: 12px arial}. Ac_wrap {position: absolute; z-index: 100; background-color: # fff; overflow-y: hidden; font-size: 14px; line-height: 20px ;}
. Ac_wrap_inner {z-index: 10; border: 1px solid # limit 2A6 ;}
. Ac_wrap * {white-space: nowrap ;}
. Ac_wrap table {background-color: # fff; width: 100% ;}
. Ac_menu {text-align: left ;}
. Ac_toolbar {text-align: right}
. Ac_menu tr. mouseo tutorial ver {background-color: # e6e6e6 ;}
. Ac_menu tr. selected {background-color: # d6deec ;}
</Style>
<Base target = "_ blank"> </base>
</Head>
<Body><Form id = "hrefform" target = "_ blank" style = "display: none;"> </form>
<Div id = "m">
<Div id = "fm">
<Form name = "f" id = "f" action = "http://www.baidu.com/s"> <input type = "text" name = "wd" id = "kw" maxlength =" 200 "value =" "/> <input type =" submit "value =" search & nbsp; suo "id =" su "target =" _ blank "/>
</Form>
</Div>
</Div>
<Script type = "text/javascript">(Function (){
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, adjust it slightly without location, instead of using the dom structure to locate
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 );
Function encode4html (s ){
Var o = [/&/g,/"/g,/'/g,/</g,/>/g];
Var n = ["& amp;", "& quot;", "& #039;", "& lt;", "& gt;"];
For (var I = 0; I <o. length; I ++)
{
S = s. replace (o [I], n [I]);
}
Return s;
};
/**
* @ Class combobox: Enter the drop-down box.
*/
Function combobox (opts ){
Mix (this, opts, 1 );
If (! This. lazyrender) this. render ();
}
Combobox. events = ["enter", "selectitem"];Combobox. prototype = {
/*
* Parameters
*/
Width: 0,
Otext: null, // text-input object
Itemsdata: null, // items data, array, which must be set in the refreshdata method
Minfilterlen: 1, // minimum filter length. Suggest effect is available only when otext. value is not small.
/*
* Open variables: readonly
*/
Omenu: null,
Otoolbar: null, // controls the row. Currently, only the close button is allowed.
Owrap: null,
Selectedindex:-1, // currently selected
Filteredvalue: "", // filter value. Filtering completed
Filteringvalue: "", // filter value. Filtering is in progress (because sometimes filtering is asynchronous)
Acvalue: "", // value automatically obtained
Disabled: false, // whether suggest is disabled. -- Determined by the page logic
Closed: false, // whether the suggest is disabled. -- Determined by suggest itself
/*
* Method
*/
Show: function (){
If (this. omenu. rows. length ){
This. owrap. style. display = "";
// Var xy = getxy (this. otext );
// Setstyle (this. owrap, {top: xy [1] + this. otext. offsetheight + "px", left: xy [0] + "px", display :""});
}
},
Hide: function (){
This. owrap. style. display = "none ";
},
Refreshitems: function (){
Var me = this;
Var data = me. itemsdata;
If (data &&! Data. _ isitemsdatarendered) {// add the attribute "_ isitemsdatarendered" to indicate whether data has been render into html.
Var html = [];
For (var I = 0; I <data. length; I ++ ){
// Var datatype = data [I]. constructor;
// If (datatype = string) {// if it is string, the string is both value and html
// Html. push ('<tr acvalue = "' + encode4html (data [I]) + '"> <td>' + encode4html (data [I]) + '</td> </tr> ');
//}
// When else if (datatype = array) {// Is array, the first element is value, and the second element is html
Html. push ('<tr acvalue = "' + encode4html (data [I] [0]) + '"> <td>' + data [I] [1] + '</td> </tr> ');
//}
// When else {// is an object, the format is {value: "aaab", html: "<B> aaa </B> B "}
// Html. push ('<tr acvalue = "' + encode4html (data [I] [" value "]) + '"> <td>' + data [I] [" html "] + '</td> </tr> ');
//}
Html. push ("</tr> ");
}
Me. _ setmenuinnerhtml (html. join (""). replace (/(<w +)/g, '$1 unselectable = "on "'));
If (data. length) me. show ();
Else me. hide ();
Me. filteredvalue = me. filteringvalue;
Me. acvalue = "";
Me. selectedindex =-1;
Data. _ isitemsdatarendered = true;
}
},
Refreshdata: function (){
This. itemsdata = ["refreshdata must be overwritten! "];
},
Setselectedindex: function (idx, needblur ){
Var me = this;
Var rows = me. omenu. rows;
If (rows. length ){
If (me. selectedindex>-1) removeclass (rows [me. selectedindex], "selected ");
Idx = (idx + rows. length + 1) % (rows. length + 1 );
If (idx = rows. length ){
Me. acvalue = me. otext. value = me. filteringvalue; // Here, filteringvalue is used instead of filteredvalue, because sometimes itemsdata is static (for example, pure combobox without filtering)
Idx =-1;
}
Else {
Me. acvalue = me. otext. value = rows [idx]. getattribute ("acvalue ");
Addclass (rows [idx], "selected ");
}
}
Else {
Idx =-1;
}
Me. selectedindex = idx;
},
_ Setmenuinnerhtml: function (html ){
Var div = createelement ("div", {innerhtml: "<table>" + html + "</table> "});
Var rows = div. firstchild. rows;
Var omenu = this. omenu;
For (var I = omenu. childnodes. length-1; I> = 0; I --) omenu. removechild (omenu. childnodes [I]);
While (rows. length ){
Omenu. appendchild (rows [0]);
}
},
Render: function (){
Var me = this;
If (me. _ rendered) return;
Me. _ rendered = true;
// Custevent. createevents (me, combobox. events );
Var owrap = createelement ("div", {classname: "ac_wrap", innerhtml: '<div class = ac_wrap_inner> <div class = ac_menu_ctn> <table cellspacing = 0> <tbody class = ac_menu> </tbody> </table> </div> <table> <tbody class = ac_toolbar> <tr> <td> <a href = # class = close> close </a> </div> </td> </tr> </ tbody> </table> </div> '. replace (/(<w +)/g, '$1 unselectable = "on "')});
// Var B = document. body;
// B. insertbefore (owrap, B. firstchild );
Var otext = me. otext;
Otext. parentnode. insertbefore (owrap, otext); // to reduce the trouble of locating, use the dom location to locate
Var els = owrap. getelementsbytagname ("tbody ");
Var otoolbar = me. otoolbar = els [1], omenu = me. omenu = els [0];
Otext. setattribute ("autocomplete", "off"); // you must use setattrubute. Otherwise, otext will be executed in the semi-input state of firefox. an exception that cannot be captured is thrown during blur.
Var w = (me. width | me. otext. offsetwidth) + "px ";
If (isie) owrap. style. width = w;
Else owrap. style. minwidth = w;
Owrap. style. top = otext. offsetheight + 'px ';
Me. owrap = owrap;
Me. hide ();
On (me. otext, "dblclick", function (e) {// monitors otext events
If (me. disabled | otext. value. length <me. minfilterlen) return;
If (me. closed =! Me. closed) me. hide ();
Else me. show ();
});
On (me. otext, "keydown", function (e) {// monitors otext events
If (me. disabled) return;
Var kcode = keycode (e );
Var dir = 0;
Switch (kcode ){
Case 40: dir = 1; break;
Case 38: dir =-1; break;
Case 27: if (! Me. closed) {me. hide (); me. closed = true; preventdefault (e)} break; // hide suggest
Case 13: me. hide (); me. onenter & me. onenter (); break; // hide suggest
}
If (dir & otext. value. length> = me. minfilterlen ){
Preventdefault (e );
If (owrap. style. display = "none "){
Me. show ();
Me. closed = false;
}
Else {
Me. setselectedindex (me. selectedindex + dir );
}
}
});
On (me. otext, "focus", function (e) {// monitors otext events
If (me. disabled) return;
If (me. _ refreshtimer) clearinterval (me. _ refreshtimer );
Me. _ refreshtimer = setinterval (function (){
Var val = otext. value;
If (val. length <me. minfilterlen ){
Me. acvalue = me. filteringvalue = me. filteredvalue = "";
Me. hide ();
Me. closed = false; // policy for absorbing google suggest: if suggest is disabled, the user clears otext and opens suggest.
}
Else if (! Me. closed ){
If (val! = Me. filteredvalue & val! = Me. filteringvalue & val! = Me. acvalue ){
Me. filteringvalue = val;
Me. refreshdata ();
}
If (me. itemsdata ){
Me. refreshitems ();
}
}
},100 );
});
On (me. otext, "blur", function (e) {// monitors otext events
Me. hide ();
Clearinterval (me. _ refreshtimer );
});
Owrap. onmousedown = function (e) {// monitors owrap events
If (isie) {otext. setcapture (); settimeout (function () {otext. releasecapture () ;}, 10) ;}// solve the problem that "you cannot click the option when entering the half-input status in ie".
Preventdefault (e );
};
Omenu. onclick = function (e) {// monitors omenu events
Var el = target (e );
Var tr = ancestornode (el, "tr ");
If (tr ){
Otext. blur (); // when the half-width input method of firefox is selected, the item is selected. The console has an error and cannot catch and does not affect the operation.
Settimeout (function () {otext. focus () ;}, 10); // solves the problem of "option cannot be clicked during semi-input".
Me. setselectedindex (tr. rowindex, true );
Me. hide ();
Me. onselectitem & me. onselectitem ();
}
};
Omenu. onmouseover = function (e) {// monitors omenu events
Var el = target (e );
Var tr = ancestornode (el, "tr ");
If (tr) addclass (tr, "mouseover ");
};
Omenu. onmouseout = function (e) {// monitors omenu events
Var el = target (e );
Var tr = ancestornode (el, "tr ");
If (tr) removeclass (tr, "mouseover ");
};
Otoolbar. getelementsbytagname ("a") [0]. onclick = function (e) {// monitors events of the close button
Me. closed = true;
Me. hide ();
Preventdefault (e );
};
}
}Window. combobox = combobox;
})();
Function g (a) {return document. getelementbyid ();};
Function getscript (d, a) {var e = document. getelementsbytagname ("head") [0], c = document. createelement ("script"), B = false; c. src = d; c. onerror = c. onload = c. onreadystatechange = function () {if (! B &&(! This. readystate | this. readystate = "loaded" | this. readystate = "complete") {B = true; a & a (); c. onerror = c. onload = c. onreadystatechange = null; e. removechild (c) ;}}; e. appendchild (c );};
Function foreach (B, a) {for (var c = 0; c <B. length; c ++) {a (B [c]) ;}}Window. sugcb = function (data ){
Var ar = [],
Baidudata = data. s | [],
Kw = g ("kw"). value;
For (var I = 0; I <baidudata. length; I ++ ){
Var key = baidudata [I],
Val = key;
If (kw & val. indexof (kw) = 0 ){
Val = kw + '<B>' + val. substr (kw. length) + '</B> ';
}
If (key) ar. push ([key, val]);
}
Cb. itemsdata = ar;
};Var cb = new combobox ({otext: g ("kw "),
Onselectitem: function () {g ('Su '). click ();},
Refreshdata: function (){
Getscript ("http://suggestion.baidu.com/su? P = 3 & cb = window. sugcb & t = 1286453644402 & wd = "+
Encodeuricomponent (this. otext. value ));
}});</Script>
</Body>
</Html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
