Use jQuery to simulate the auto-prompt effect of Google, jquerygoogle
Note:
1. This function uses the example database Northwind in SqlServler2000. Patch SP3 or SP4;
2. Download The jQuery component, which is available in Hexi FTP;
3. This function is similar to Google's automatic prompt. It is obtained from the server through the ajax engine and XML data is returned;
4. performance issues are not considered in this example;
5. Firefox is not supported because the browser does not have the propertychange event.
Steps:
1. Create a Servlet named GoogleServlet to read data from the database and generate data in XML format.
Package com. aptech. servlet;
Import java. io. IOException;
Import java. io. PrintWriter;
Import java. SQL. Connection;
Import java. SQL. DriverManager;
Import java. SQL. PreparedStatement;
Import java. SQL. ResultSet;
Import java. SQL. SQLException;
Import javax. servlet. ServletException;
Import javax. servlet. http. HttpServlet;
Import javax. servlet. http. HttpServletRequest;
Import javax. servlet. http. HttpServletResponse;
Public class GoogleServlet extends HttpServlet {
Public void service (HttpServletRequest request, HttpServletResponse response)
Throws ServletException, IOException {
Response. setContentType ("text/xml; charset = UTF-8 ");
Request. setCharacterEncoding ("UTF-8 ");
PrintWriter out = response. getWriter ();
String key = request. getParameter ("key ");
Try {
Class. forName ("com. microsoft. sqlserver. jdbc. SQLServerDriver ");
Connection conn = DriverManager. getConnection ("jdbc: sqlserver: // 127.0.0.1: 1433; DatabaseName = northwind", "sa ","");
PreparedStatement pstmt = conn. prepareStatement ("select shipname, count (shipname) as c from [orders] where shipname like? Group by shipname ");
Pstmt. setString (1, key + "% ");
ResultSet rs = pstmt.exe cuteQuery ();
StringBuilder xml = new StringBuilder ();
Xml. append ("<results> ");
If (rs! = Null ){
While (rs. next ()){
Xml. append ("<result key =" + rs. getString (1) + "count =" + rs. getInt (2) + "> </result> ");
}
}
Xml. append ("</results> ");
Rs. close ();
Pstmt. close ();
Conn. close ();
Out. print (xml. toString ());
} Catch (ClassNotFoundException e ){
// TODO Auto-generated catch block
E. printStackTrace ();
} Catch (SQLException e ){
// TODO Auto-generated catch block
E. printStackTrace ();
}
Out. flush ();
Out. close ();
}
}
2XX defines an HTML file named google.html and is responsible for dynamically generating the effects of automatic prompts.
<! Doctype html public "-// W3C // dtd html 4.01 Transitional // EN">
<Html>
<Head>
<Title> google.html </title>
<Meta http-equiv = "keywords" content = "keyword1, keyword2, keyword3">
<Meta http-equiv = "description" content = "this is my page">
<Meta http-equiv = "content-type" content = "text/html; charset = UTF-8">
<Script type = "text/javascript" src = "jquery-1.2.6.pack.js"> </script>
<Script type = "text/javascript">
Var line = 0;
Function del (){
If ($ ("# newDiv ")){
$ ("# NewDiv"). remove ();
Line = 0;
}
}
$ (Document). ready (function (){
// When the text box loses focus, the layer disappears.
$ (Document. body). click (function (){
Del ();
});
$ (Document). keydown (function (){
// Press enter at 38, 40, and 13
If ($ ("# newDiv ")){
If (event. keyCode = 40 ){
$ ("Table tbody tr"). eq (line)
. Css ("backgroundColor", "blue ")
. Css ("color", "white ");
$ ("Table tbody tr"). eq (line <0? 0: line-1)
. Css ("backgroundColor", "white ")
. Css ("color", "black ");
Line = (line = $ ("table tbody tr"). length? 0: line + 1 );
} Else if (event. keyCode = 38 ){
Line = (line = 0? $ ("Table tbody tr"). length: line-1 );
$ ("Table tbody tr"). eq (line)
. Css ("backgroundColor", "blue ")
. Css ("color", "white ");
$ ("Table tbody tr"). eq (line >$ ("table tbody tr"). length? 0: line + 1)
. Css ("backgroundColor", "white ")
. Css ("color", "black ");
} Else if (event. keyCode = 13 ){
$ ("# Key"). val ($ ("table tbody tr"). eq (line-1). find ("td" ).eq(0).html ());
Del ();
}
}
});
$ ("# Key"). bind ("propertychange", function (){
Del ();
Var top = $ ("# key"). offset (). top;
Var left = $ ("# key"). offset (). left;
Var newDiv = $ ("<div/>"). width ($ ("# key"). width () + 6)
. Css ("position", "absolute ")
. Css ("backgroundColor", "white ")
. Css ("left", left)
. Css ("top", top + $ ("# key"). height () + 6)
. Css ("border", "1px solid blue ")
. Attr ("id", "newDiv ");
Var table = $ ("<table width = '20140901'/> ")
. Attr ("cellpadding", "0 ")
. Attr ("cellspacing", "0 ");
$. Post ("GoogleServlet", {key: $ ("# key"). val ()}, function (xml ){
$ (Xml). find ("results result"). each (function (){
Var key = $ (this). attr ("key ");
Var count = $ (this). attr ("count ");
Var tr = $ ("<tr/>" comment .css ("cursor", "pointer"). mouseout (function (){
((This).css ("backgroundColor", "white" ).css ("color", "black ");
}). Mouseover (function (){
((This).css ("backgroundColor", "blue" ).css ("color", "white ");
}). Click (function (){
$ ("# Key"). val ($ (this). find ("td" 2.16.eq(02.16.html ());
Del ();
});
Var td1 = $ ("<td/>" ).html(key).css ("fontSize", "12px ")
. Css ("margin", "5 5 5 5 ");
Var td2 = $ ("<td/>" Expected .html ("Total" + count + "result ")
. Attr ("align", "right" ).css ("fontSize", "12px ")
. Css ("color", "green" ).css ("margin", "5 5 5 ");
Tr. append (td1). append (td2 );
Table. append (tr );
NewDiv. append (table );
});
});
$ (Document. body). append (newDiv );
If ($ ("# key"). val () = ""){
$ ("# NewDiv"). remove ();
}
});
});
</Script>
</Head>
<Body>
<H1> Google search <Div style = "margin-top: 20px; margin-left: 30px">
Enter the Search Keyword: <input name = "key" id = "key" style = "width: 300">
<Input type = "button" value = "Goolge">
</Div>
</Body>
</Html>
3. Final Results:
Comment out the jquery-1.4.2-vsdoc.js when using the jquery-1.4.3.min.js
Jquery prompt
Also install a vs2008-jquery patch
Download code.msdn.microsoft.com/..d4241736
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
