This article mainly introduced the JS implementation of Google, Baidu search box input information Intelligent Implementation method, example analysis of JavaScript to implement intelligent tips, very practical value, need friends can refer to the
This article is an example of the realization of JS to achieve imitation Google, Baidu search box input information intelligent Tips implementation method. Share to everyone for your reference. Specifically as follows:
?
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26-27--28 29---30 31--32 33 34 35 36 37 38-39 40 41 42 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 5, 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 11 9 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148-149 150 151 152 153 154 | <! 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> imitation google, Baidu search box input information intelligent hint of realization </ title> <style type= "Text/css" media= "screens" > body {font:11px arial; suggest_link Color: #FFFFFF; padding:2px 6px 2px 6px; }. Suggest_link_over {width:120px background-color: #E8F2FE; padding:2px 6px 2px 6px;} #suggestResult {POSITION:ABSO lute; 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;} inpu T_off {padding:2px 8px 0pt 3px height:18px border:1px solid #CCC background-color: #FFF; input_move {padding:2 PX 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 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 (Mi Crosoft. XMLHTTP "); catch (e) {}} return obj; ///When the contents of the input box change, call the 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 =) {var sourceitems = O.responsetext.spli T ("n"); if (Sourceitems.length > 1) {suggestText.style.display = ""; suggesttext.innerhtml = ""; For (Vari = 0; i < sourceitems.length-1; i++) {var sourcetext = Sourceitems[i].split ("@") [1]; var sourcevalue = Sourceitems[i].split ("@") [0]; var s = "<div onm Ouseover= "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 ';}} } }; Specifies the response function o.send (null); Send 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) {D Iv_value.classname = "Suggest_link"; function Setsearch (A, b) {$ ("Txtsearch"). Value = A; $ ("Valueresult"). Value = b; var div = $ ("Suggestresult"); Div.inner HTML = ""; Div.style.display = "None"; } function Showresult () {Alert ($ ("Txtsearch"). Value + $ ("Valueresult"). value);} </script> </head> <body& Gt <form id= "Form1" action= "" > <input type= "text" id= "Txtsearch" name= "Txtsearch" onkeyup= "Delayexecute ();" Size = "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> |
Server-side C # code
?
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 The | <%@ WebHandler language= "C #" class= "SearchResult"%> using System; Using System.Web; Using System.Data; public class Searchresult:ihttphandler {public void ProcessRequest (HttpContext context) {object Queryword=context. request.querystring["SearchText"]; if (Queryword!= null) {if (queryword.tostring). Trim (). Length > 0) {DataTable dt = Getdb (); String returntext = ""; if (dt!= null && dt. Rows.Count > 0) {datarow[] dr = dt. Select ("name like '%" + queryword.) ToString () + "% '"); if (Dr. Length > 0) {for (int i = 0; i < Dr.) Length; i++) {//can be set to return multiple strings returntext + = dr[i]["id"]. ToString () + "@" + dr[i]["name"]. ToString () + "n"; }} context. Response.Write (Returntext); Context. Response.End (); }}} PublIC bool IsReusable {get {return false;}///<summary>///Obtaining a data source///</summary>///<returns> Data Source & Lt;/returns> private DataTable Getdb () {DataTable dt = new DataTable (); dt. Columns.Add ("id"); Dt. Columns.Add ("name"); Dt. Columns.Add ("Age"); Dt. Rows.Add (new object[] {"000001", "John", "26"}); Dt. Rows.Add (new object[] {"000002", "Zhangxiao", "26"}); Dt. Rows.Add (new object[] {"000003", "Zhang Yi", "27"}); Dt. Rows.Add (new object[] {"000004", "Dick", "25"}); Dt. Rows.Add (new object[] {"000005", "Li Shing", "27"}); return DT; } } |
The above describes the JS to achieve imitation Google, Baidu search box input information intelligent tips to achieve the method, I hope this article on the JavaScript program for everyone to help.
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
