Ajax production smart prompt search, ajax production smart

Ajax production smart prompt search, ajax production smart

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:

 1 * { 2     padding:0px; 3     margin:0px; 4 } 5  6 #searchbox { 7     margin-top:10px; 8     height:37px; 9     width:550px;10 }11 #searchbox div {12     float:left;13 } 14 #txtTitle {15    height:35px;16    width:440px;17    line-height:35px;18    border:solid 1px #4791FF;19 }20 #btnSelect a{21    width:100px;22    height:37px;23    background:#167ED9;24    display:block;25    line-height:37px;26    color:#ffffff;27    text-align:center; 28 }29 a:link {30     text-decoration:none;31 }32 a:hover {33     cursor:pointer;34 }35 #dtitles {36     width:540px;37     height:90px;38     border:solid 1px #CCCCCC;39     display:none;40     font-size:12px;41 }42 .li1 {43     background:#F0F0F0;44 }

Js Code:

1 $ (function () 2 {3 // 1. after the page is loaded, find the content of the text box to trigger an event 4 $ ("# txtTitle "). keyup (function () 5 {6 // 2. get the content of the text box. Note that the space is 7 var title = $. trim ($ ("# txtTitle "). val (); 8 // 3. after obtaining the input content, it will be passed to the background through ajax 9 $. post ("/Handler3.ashx", {"title": title}, function (data) 10 {11 if (title = "") {12 $ ("# dtitles "). hide (); 13} 14 else15 {16 // display the div and clear it 17 $ ("# dtitles" ..show().html (""); 18 if (data = "") {19 $ ("# dtitles "). tex T ("no relevant data! "); 20} 21 else {22 $ (" # dtitles "). append (data); 23 // 4. after moving the mouse up, add a background 24 $ ("li "). hover (function () 25 {26 $ (this ). addClass ("li1"); 27}, function () 28 {29 $ (this ). removeClass ("li1"); 30}); 31} 32} 33}); 34}); 35 });

Ajax:

1 public void ProcessRequest (HttpContext context) 2 {3 // 1. after submission, we will receive 4 string title = context. request. form ["title"]; 5 // 2. obtain an SQL statement 6 string strsql = string. format ("select top 5 title from RNews where Title like '% {0} %'", title); 7 // 3. how can I handle the SQL statement? 8 DataTable dt = SqlHelper. executeDataSetText (strsql, null ). tables [0]; 9 // 4. we finally want to return a list of strings. We need to piece together 10 StringBuilder sb = new StringBuilder (); 11 // 4.1 to determine whether there is data 12 if (dt. rows. count> 0) 13 {14 // 4.1.115 sb. append ("<ul>"); 16 for (int I = 0; I <dt. rows. count; I ++) 17 {18 sb. append (string. format ("<li> {0} </li>", dt. rows [I] [0]. toString (); 19} 20 sb. append ("</ul>"); 21} 22 context. response. write (sb. toString (); 23}