JS implementation of imitation Google, Baidu search box input Information Intelligent Prompt Realization method

Source: Internet
Author: User

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.

Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.