Home>

First, the effect map:

Second, the implementation process:

Idea:

Part of the code:html:

<div>
  <div><input type="text" />
  <div><a href="javascript:;">google</a></div>
 </div>
 <div></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 ()
</p>
<p>
{
 //1. After the page loads,Find the content of the text box and trigger an event on it
 $("#txttitle"). keyup (function ()
 {
  //2. Get the content of the text box,Pay attention to spaces
  var title=$.trim ($("#txttitle"). val ());
  //3. After getting the input content,Will be transmitted to the background through ajax
  $.post ("/handler3.ashx", {"title":title}, function (data)
  {
   if (title == "") {
    $("#dtitles"). hide ();
   }
   else
   {
    //Show the display div, clear it
    $("#dtitles"). show (). html ("");
    if (data == "") {
     $("#dtitles"). text ("No related data!");
    }
    else {
     $("#dtitles"). append (data);
     //4. After the mouse is moved up,Add a background
     $("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 a sql statement
   string strsql=string.format ("select top 5 title from rnews where title like"%{0}%"", title);
   //3. How do I get sql to deal with it?
   datatable dt=sqlhelper.executedatasettext (strsql, null) .tables [0];
   //4. The last thing we want to return is a list,To piece together a string
   stringbuilder sb=new stringbuilder ();
   //4.1 determine if there is data in the obtained 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 ());
  }
  • Previous Eight ways to organize JavaScript to create objects
  • Next Object inheritance in JavaScript