Ajax implements smart prompt search and ajax Smart Search

Ajax implements smart prompt search and ajax Smart Search

I ,:

II. Implementation Process: 

Ideas:

Iii. Some code:
Html:

 <div id="searchbox">  <div><input type="text" id="txtTitle" /></div>  <div id="btnSelect"><a href="javascript:;">Google</a></div> </div> <div id="dtitles"></div>  

Css code:

* { padding:0px; margin:0px;}#searchbox { margin-top:10px; height:37px; width:550px;}#searchbox div { float:left;} #txtTitle { height:35px; width:440px; line-height:35px; border:solid 1px #4791FF;}#btnSelect a{ width:100px; height:37px; background:#167ED9; display:block; line-height:37px; color:#ffffff; text-align:center; }a:link { text-decoration:none;}a:hover { cursor:pointer;}#dtitles { width:540px; height:90px; border:solid 1px #CCCCCC; display:none; font-size:12px;}.li1 { background:#F0F0F0;}

Js Code:

$ (Function ()
{// 1. after the page is loaded, find the content of the text box to trigger an event $ ("# txtTitle "). keyup (function () {// 2. get the content of the text box. Pay attention to the space var title = $. trim ($ ("# txtTitle "). val (); // 3. after obtaining the input content, it must be passed to the background through ajax $. post ("/Handler3.ashx", {"title": title}, function (data) {if (title = "") {$ ("# dtitles "). hide ();} else {// display the div and clear it $ ("# dtitles" ..show().html (""); if (data = "") {$ ("# dtitles "). text ("no relevant data! ");} Else {$ (" # dtitles "). append (data); // 4. after moving the mouse up, add a background $ ("li "). hover (function () {$ (this ). addClass ("li1") ;}, function () {$ (this ). removeClass ("li1 ");});}}});});});

Ajax:

Public void ProcessRequest (HttpContext context) {// 1. after submission, we will receive string title = context. request. form ["title"]; // 2. obtain an SQL statement string strsql = string. format ("select top 5 title from RNews where Title like '% {0} %'", title); // 3. how can I handle the SQL statement? DataTable dt = SqlHelper. executeDataSetText (strsql, null ). tables [0]; // 4. finally, we want to return a list. We need to piece it together with strings. StringBuilder sb = new StringBuilder (); // 4.1 checks whether there is data in the SQL result if (dt. rows. count> 0) {// 4.1.1 sb. append ("<ul>"); for (int I = 0; I <dt. rows. count; I ++) {sb. append (string. format ("<li> {0} </li>", dt. rows [I] [0]. toString ();} sb. append ("</ul>");} context. response. write (sb. toString ());}

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.