From Google Blog
The basic principle is to create an IFRAME in the current window, and then the list of prompts in the IFRAME and select the selected item in the search box through the list point. It can be listed so quickly, and it seems that all prompts have been pre-acquired and quantity records in advance. I tried "SEX", there is no relevant search prompt, it seems that the search term has been strictly filtered. In addition: This dynamic list function is also applied in the Gmail's address bar, as shown:
The source code for Google auto-completion is as follows:
Code:
// Copyright 2004 and onwards Google Inc.Var W = ""; var PA = false; var da = ""; var da = false; var g = "; var g ="; var m = ";" VAR J = -1; var z = null; var z = null; var ca = 5; var q = ""; var lb = "div"; var bb = "span"; var la = NULL VAR A = NULL; VAR B = NULL; VAR XA = NULL; VAR MB = NULL; var x = null; var ha = null; var ra = false; var kc = null; var hc = null; var ua = new Object (); var ca = 1; var aa = 1; var Na = false; var na = -1; var va = (new Date ()). Gettime (); var q = false; var k = null; var SA = NULL; VAR E = NULL; var aa = null; var ba = false; var ka = false; var ka = false; var p = 50; var = null; var ya = null; var w = 0; installac = Function (FRM, FLD, SM, PN, RL, HD, SM, UFN) {LA = FRM; A = FLD; XA = Sb; if (! PN) PN = "Search"; IA = PN; var kb = "en |"; var jb = "zh-cn | zh-tw | ja | ko | vi |"; if (! rl || kb.indexof (rl "|") == - 1) rl = "en" ; HA = NB (rl); if (jb.indexof (HA "|) == - 1) {x = true; y = false; ba = false} else {x = false; if (ha.indexof ") == 0) y = false; else y = true; ba = true} if (! hd) hd = false; ya = hd; if (! SM) SM =" query "; w = SM; MB = UFN; AC ()}; function yb () {ra = true; A.BLUR (); setTimeout ("sfi ();", 10); return} function fb () {IF (Document.createEvento bject) {var y = document.createEventObject (); y.ctrlKey = true; y.keyCode = 70; document.fireEvent ( "onkeydown", y)}} function nc (vb) {var y = document.createEventObject () Y.ctrlKey = true; y.keycode = vb; document.fireEvent ("onkeydown"
, y)} function GC (Event) {} function IC (Event) {} {if (! Event && window.event) Event = window.event; if (event) NA = Event.Keycode; if (Event && Event .keycode == 8) {IF (a.createtextRange && (event.srcelement == A && (bb (a) == 0 && lb (a) == 0)))) {cc (a); Event.cancelbubble = TRUE Event.ReturnValue = false; return false}}} function mc () {} function db () {= (w == "URL") {ha ()} ba ()} Function ba () {if (b)} {B.Style.Left = OB (a) "PX"; B.Style.top = QB (a) a.OffsetHeight-1 "PX"; b.style.width = ja () "PX" }}} function ja () {if (Navigator && navigator.useragent.tolowercase (). Indexof ("msie") == - 1) {Return A.OffSetWidth-ca * 2} else {return a.offsetwidth}} Function AC () {IF (JB ()) {q = true} else {q = false} if (pa) e = "complete"; Else E = "/" = " " HA; IF (! q) {qa ("QU", ", 0, E, NULL, NULL)} la.οnsubmit = fa; a.atocomplete =" OFF "; a.οnblur = ob; if (a.createtextRange) A.οnkeyup = New function ("Return Okuh (Event);" Else A.οkeyup = OKUH; A.οNSUBMIT = FA; g = a.Value; ta = g; b = Document.createElement ("DIV") B. ID = "CompleteDiv"; ca = 1; aa = 1; b.Style.BorderRight = "Black" CA "PX Solid"; B.Style.BorderLeft = "Black" CA "PX Solid"; B.Style.Bordertop = "Black" AA "PX Solid"; b.Style.Borderbottom = "Black" AA "PX Solid"; b. Style.zindex = "1"; b.style.paddingright = "0"; b.Style.paddingleft = "0" ;style.paddingtop = "0"; b.style.paddingBottom =
"0"; ba (); b.style.visibility = "hidden"; b.style.position = "absolute"; b.style.BACKGROUNDCOLOR = "White"; document.body.Appendchild (b); ma (" ", new array (), new array ()); GB (b); var s = document.createElement (" div "); s.style.visibility =" hidden "; s.style.position =" absolute "; S.Style.Left = "- 10000"; s.style.top = "- 10000"; s.style.Width = "0"; s.style.Height = "0"; var m = document.createElement (" Iframe "); M.COMPLETEDIV = B; M.Name =" complectionFrame "; m.id =" completionframe "; M.SRC = SA; S.Appendchild (m); document.body.appendchild (s); if ( frames && (frames [ "completionFrame"] && frames [ "completionFrame"] frameElement.)) B = frames [ "completionFrame"] frameElement;. else B = document.getElementById ( "completionFrame"); if (w == "url") {HA (); ba ()} window.οnresize = db; document.οEydοwn = Pb; fb ()} function ob (event) {if (! Event && window.event) Event = window.event; if (! Ra) { F (); if (na == 9) {xb (); na = -1}} ra = false} okuh = function (e) {m = E.KeyCode; AA = a.Value; OA ()}; Function XB () {xa.focus ()} sfi = function () {a.focus ()}; function wb (va) {for (var f = 0, OA = "", zb = "/ n / r" FFunction QA (I, DC) {var Ga = i.GetElementSbyTagname (bb); if (ga) {for (VAR f = 0; FFunction u (i) {if (! i) Return Null; Return QA (i, "cautocomplete")} Function WA (i) {IF (! i) Return Null; Return QA (I, "Dautocomplete")} Function F () {document.GETELEMENTBYID ("Completediv"). style.visibility = "hidden"}}}}}} function CB () {document.getlementByid ( "Completediv"). style.visibility = "visible";
Ba ()} Function MA (IS, CS, DS) {ua [IS] = New Array (CS, DS)} Sendrpcdone = Function (FR, IS, CS, DS, PR) {IF (W> 0) W- -; VAR LC = (New Date ()). getTime (); if (! fr) fr = b; MA (IS, CS, DS); var b = fr.completediv; b.completeStrings = CS; B. Displaystrings = DS; B.PREFIXSTRINGS = Pr; RB (B, B.CompleteStrings, B.disPlayStrings); PA (B, U); if (Ca> 0) B.Height = 16 * Ca 4; Else F ()} Function OA () {IF (M == 40 || M == 38) Yb (); var n = lb (a); var v = bb (a); var v = a.Value; if (x &&m! = 0) {if (n> 0 && v! = - 1) v = v.substring (0, v); if (m == 13 || m == 3) {var D = a; if (d.createtextRange) {var t = d.createtextRange (); T.Movestart ("Character", D.Value.Length); T.SELECT ()} else if (d.setSelectionRange) {D.SetSelectionRange (D.Value.Length, D .value.Length)}} else {if (a.Value! = V) s (v)}} g = v; if (EB (M) && M! = 0) PA (B, u)} Function FA () {RETURN XB (W)} function XB (EB) {Da = true; if (! q) {qa ("QU", ", 0, E, NULL, NULL)} f (); if (EB == "URL") {var r = ""; if (j! = - 1 && h) r = u (h); if (r == ") r = a.Value; if (q ==") Document. Title = r; else document.title = q; var tb = "window.frames ['" mb ""; location = / " r '"; settimeout (tb, 10); return false} Else IF (EB == "Query") {la.s Ubmit (); return true}} newwin = function () {WINDOW.OPEN (A.Value); f (); return false}; idkc = function (e) {if (ba) {var ta = a.Value; IF (Ta! = AA) {m = 0; OA ()} aa = Ta; SETTIMEOUT ("IDKC ()", 10)}}; setTimeout ("Idkc ()", 10); function NB (la) { Encodeuricomponent Return Encodeuricomponent (LA); if (escape) Return Escape (LA)} Function YB (MB) {var H = 100; for (var o = 1; o <= (MB-2) / 2; o
) {H = h * 2} h = h 50; return h} idfn = function () {if (ta! = G) {if (! Da) {var za = NB (g); var ma = uA [ g]; if (mA) {va = -1; Sendrpcdone (B, G, MA [0], MA [1], B.COMPLETEDIV.PREFIXSTRINGS)}} else {w ; VA = (New Date ()). gettime (); if (q) {Fc (ZA)} else {QA ("Qu", ZA, NULL, E, NULL, NULL); Frames ["CompletionFrame"]. Document.Location.Reload (TRUE)}} a .focus ()} da = false} Ta = g; settimeout ("IDFN ()", yb (w)); return true}; settimeout ("IDFN ()", 10); var cb = function () {s (U (this)); q = wa (this); da = true; fa ()}; var pb = function () {if (h) l (h, "aautocomplete"); l (this, "bautocomplete" )}; var EC = function () {L (this, "aautocomplete")}; function na (c) {g = g; s (g); q = g; if (! ZA || z <= 0) Return; Cb (); if (c> = z) {c = z-1} if (j! = - 1 && c! = j) {L (h, "aautocomplete"); j = -1} if (c < 0) {j = -1; A.focus (); return} j = c; h = za.item (c); l (h, "bautocomplete"); g = g; Q = Wa (h); s (U (h))} Function EB (ja) {IF (ja == 40) {NA (j 1); return false} else if (ja == 38) {NA (j-1); return false} Else if (ja == 13 || ja == 3) {Return False} Return true} Function PA (K, IB) {var D = a; var t = false; j = -1; var j = k.GtelementsBytagname (Lb); var o = j.Length; z = O; za = j; ca = o; g = g; if (g == "|| o = = 0) {f ()} else {CB ()} var ab = ""; if (g.Length> 0) {var f; var o; for (var f = 0; ffunction ob (r) {Return YA (r, "offsetleft")} function qb (r) {RETURN YA (R, "Offsettop")} Function Ya (R, IA) {var kb = 0; While (R) {KB = R [IA]; R = r.offsetparent} Return KB} Function QA (Name, Value, Ra, HB, FB, SB) {var NB = Name "=" VALUE (Ra? "; Expires =" ra.togmtstring (): "" ) (hb? ";
Path = " HB:" ") (FB?"; domain = " fb:") (SB? "; second": "); document.cookie = nb} function ha () {var xa = document.body.scrollwidth-220; xa = 0.73 * xa; a.size = math.floor (xa / 6.18)} Function LB (n) {var n = -1; if (n.createtextRange) {var fa = Document.selection.createrange (). duplicate (); n = fa.text.length} else if (n.setSelectionRange) {n = n.selectionend-n.selectionstart} return n} function bb (n) {var v = 0; if (n.createtextRange) {var fa = document.selection.createrange (). Duplicate (); fa.movend ("textedit", 1); v = N.Value.Length-fra.text.length} else IF (n.setselectionRange) {v = n.selectionStart} else {v = -1} return v} function cc (d) {if (d.createtextRange) {var t = d.createtextRange (); T.MOVESTART (" Character ", D.Value.Length; T.Select ()} else if (d.setSelectionRange) {D.SetSerectionRange (D.Value.Length, D.Value.Length)}} Function JC (ZB, EA) { IF (! EA) EA = 1; IF (PA && PA <= EA) {var = document.createElement ("div"); Ia.innerHtml = ZB; Document.getElementByid ("console"). Appendchild (Ia)}} Function L (C, Name) {db (); c.classname = name; if (ka) {return} switch (name.charat (0)) {CASE "m": c.Style.FontSize = "13px"; c.style.fontfamily = "arial, sans-serif"; c.style.Wordwrap = "Break-word"; Break; Case "L": C.Style .display = "block"; c.style.paddingleft = "3"; c.Style.paddingright = "3"; c.Style.Height = "16px"; c.Style.Overflow = "hidden"; break; case "a": c.Style.backgroundColor = "white"; c.style.color = "black"; if (c.displayspan) {c.displayspan.style.color = "green"} Break; Case "B": C.Style.BackgroundColor =
"# 3366cc"; c.style.color = "white"; if (c.displayspan) {c.displayspan.style.color = "white"} Break; Case "C": c.Style.width = p "%% ";Style.cssfloat =" left "; break; case" d ": c.Style.cssfloat =" right "; c.Style.width = 100-p "% "; if (w ==" query " ) {c.Style.FontSize = "10px"; c.Style.Textalign = "right"; c.style.color = "green"; c.Style.paddingtop = "3px"} else {c.style.color = "# 696969"} Break}} function db () {p = 65; if (w == "query") {var wb = 110; var sa = ja (); var TB = (SA-WB) / SA * 100; p = Tb} else {p = 65} if (ya) {p = 99.99}} Function GB (i) {db (); var ub = "font-size: 13px; font-family: arial, sans- SERIF; Word-Wrap: Break-Word; "; VAR VB =" Display: Block; Padding-Left: 3; Padding-Right: 3; Height: 16px; Overflow: hidden; "; var bc =" background-color: White; "; var =" Background-color: # 3366cc; color: white! import; "; var ub =" display: block; margin-left: 0%; Width: " p "%; float: Left; "; var ga =" Display: block; margin-left: " p "%; "; if (w ==" query ") {ga =" font-size: 10px; text-align: Right; Color: Green Padding-top: 3px; "} else {ga =" color: # 696969; "} D (". Mautocomplet e ", ub); d (". lauTocomplete ", vb); d (". AAUTOCOMPLETE * ", BC); D (". Bautocomplete * ", QB); D (". Cautocomplete ", UB); D ( ".dautocomplete", Ga); L (i, "mautocomplete")} Function RB (I, CS, HB) {while (I.ChildNodes.Length> 0) i.removechild (I.childNodes [0]); for (VAR f = 0; FFunction D (Name, GB) {IF (ka) {var i = document.stylesheets [0];
