Ajax Implementation Intelligent Prompt search function _ajax related

One, the effect chart:

Second, the realization process:

Ideas:

Third, part of the 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, the contents of the text box are found to trigger an event
 $ ("#txtTitle"). KeyUp (function ()
 {
  //2. Gets the contents of the text box, note that the space
  var title = $.trim ($ ("#txtTitle"). Val ());
  3. After obtaining the input content, it is necessary to pass Ajax to the background
  $.post ("/handler3.ashx", {"title": Title}, function (data)
  {
   if (title = = ""). ) {
    $ ("#dtitles"). Hide ();
   else
   {
    //show Div, empty it
    $ ("#dtitles"). Show (). HTML ("");
    if (data = = "") {
     $ ("#dtitles"). Text ("No relevant information!")
    ;
    else {
     $ ("#dtitles"). Append (data);
     4. After the mouse move up, add a background of
     $ ("li"). Hover (function ()
     {
      $ (this). addclass ("Li1");
     }, function ()
     {
      $ (this). Removeclass ("Li1");
     })
 ;}}
);

Ajax:

public void ProcessRequest (HttpContext context)
  {
   //1. After submitting, we want to receive
   string Title=context. request.form["title"];
   2. Get an SQL statement
   string strSQL = string. Format ("select Top 5 title of Rnews where title like '%{0}% '", title);
   3. How do I get the SQL to do the processing?
   DataTable dt = Sqlhelper.executedatasettext (strsql,null). Tables[0];
   4. The last thing we want to return is a list to do string piecing
   StringBuilder sb = new StringBuilder ();
   4.1 Determine whether the resulting SQL results have data 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 the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.