<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> <Html xmlns = "http://www.w3.org/1999/xhtml"> <Head> <Title> implementation of smart prompts similar to input information in google and Baidu search boxes </title> <Style type = "text/css" media = "screen"> Body { Font: 11px arial; } . Suggest_link { Width: 120px; Background-color: # FFFFFF; Padding: 2px 6px 2px 6px; } . Suggest_link_over { Width: 120px; Background-color: # E8F2FE; Padding: 2px 6px 2px 6px; } # SuggestResult { Position: absolute; Background-color: # FFFFFF; Text-align: left; Border: 1px solid #000000; } /* Input */ . Input_on { Padding: 2px 8px 0pt 3px; Height: 18px; Border: 1px solid #999; Background-color: # FFFFCC; } . Input_off { Padding: 2px 8px 0pt 3px; Height: 18px; Border: 1px solid # CCC; Background-color: # FFF; } . Input_move { Padding: 2px 8px 0pt 3px; Height: 18px; Border: 1px solid #999; Background-color: # FFFFCC; } . Input_out { /* Height: 16px; default height */ Padding: 2px 8px 0pt 3px; Height: 18px; Border: 1px solid # CCC; Background-color: # FFF; } </Style> <Script language = "javascript" type = "text/javascript"> Var $ = document. getElementById; // Create an XMLHttpRequest object Function createXMLHttpRequest (){ Var obj; If (window. XMLHttpRequest) {// Mozilla Browser Obj = new XMLHttpRequest (); } Else if (window. ActiveXObject) {// IE browser Try { Obj = new ActiveXObject ("Msxml2.XMLHTTP "); } Catch (e ){ Try { Obj = new ActiveXObject ("Microsoft. XMLHTTP "); } Catch (e ){} } } Return obj; } // This function is called when the content in the input box changes. Function searchSuggest (){ Var inputField = $ ("txtSearch "); Var suggestText = $ ("suggestResult "); If (inputField. value. length> 0 ){ Var o = createXMLHttpRequest (); Var url = "SearchResult. ashx? SearchText = "+ escape (inputField. value ); O. open ("GET", url, true ); O. onreadystatechange = function (){ If (o. readyState = 4 ){ If (o. status = 200 ){ Var sourceItems = o. responseText. split ("\ n "); If (sourceItems. length> 1 ){ SuggestText. style. display = ""; SuggestText. innerHTML = ""; For (var I = 0; I <sourceItems. length-1; I ++ ){ Var sourceText = sourceItems [I]. split ("@") [1]; Var sourceValue = sourceItems [I]. split ("@") [0]; Var s = "<div onmouseover = \" javascript: suggestOver (this );\""; S + = "onmouseout = \" javascript: suggestOut (this );\""; S + = "onclick = \" javascript: setSearch ('"+ sourceText +"', '"+ sourceValue + "');\""; S + = "class = \" suggest_link \ ">" + sourceText + "</div> "; SuggestText. innerHTML + = s; } } Else { SuggestText. style. display = "none "; } } } }; // Specify the Response Function O. send (null); // send the request } Else { SuggestText. style. display = "none "; } } Function delayExecute (){ $ ("ValueResult"). value = ""; Window. setTimeout (function () {searchSuggest ()}, 800 ); // Delay processing } Function suggestOver (div_value ){ Div_value.className = "suggest_link_over "; } Function suggestOut (div_value ){ Div_value.className = "suggest_link "; } Function setSearch (a, B ){ $ ("TxtSearch"). value =; $ ("ValueResult"). value = B; Var div = $ ("suggestResult "); Div. innerHTML = ""; Div. style. display = "none "; } Function showResult (){ Alert ($ ("txtSearch"). value + $ ("valueResult"). value ); } </Script> </Head> <Body> <Form id = "form1" action = ""> <Input type = "text" id = "txtSearch" name = "txtSearch" onkeyup = "delayExecute ();" size = "20" Class = "input_out" onfocus = "this. className = 'input _ on'; this. onmouseout = ''" Onblur = "this. className = 'input _ off'; this. onmouseout = function () {this. className = 'input _ out '};" Onmousemove = "this. className = 'input _ move '" onmouseout = "this. className = 'input _ out'"/> <Input type = "hidden" id = "valueResult" name = "valueResult" value = ""/> <Br/> <Div id = "suggestResult" style = "display: none"> </Div> <Br/> <Input id = "button1" type = "button" value = "Submit" onclick = "showResult ();"/> </Form> </Body> </Html> |