jQuery搜索框自动补全功能插件实现-autocomplete.js

最近用nodeclub实现股票的输入关键字自动补全股票信息进行搜索功能,原先用jQuery-ui,结果jQuery-ui库太大,所以考虑用其他插件,最终选择使用autocomplete.js,控件简单用着方便。留下记录

登录界面 login.jsp:

源码如下:

 

 

[java] view
plain copy

 

 

<!doctype html>
<html lang=”en-US”>
<head>
  <meta http-equiv=”Content-Type”
content=”text/html;charset=utf-8″>
  <title>Input Autocomplete Suggestions Demo</title>
  <link rel=”stylesheet” type=”text/css” media=”all”
href=”style.css”>
  <script type=”text/javascript”
src=”js/codedata.js”></script>
  <script type=”text/javascript”
src=”js/jquery-1.9.1.min.js”></script>
  <script type=”text/javascript”
src=”js/jquery.autocomplete.min.js”></script>
  <script type=”text/javascript”
src=”js/currency-autocomplete.js”></script>
</head>

  1. <%@ page language=”java” import=”java.util.*” contentType=”text/html; charset=utf-8″%>  
  2. <%  
  3.    String path = request.getContextPath();  
  4.    String basePath = request.getScheme()+”://”+request.getServerName()+”:”+request.getServerPort()+path+”/”;  
  5. %>  
  6. <html>  
  7.     <head>  
  8.         <!– Page title –>  
  9.         <title>imooc – Login</title>  
  10.         <!– End of Page title –>  
  11.         <!– Libraries –>  
  12.         <link type=”text/css” href=”css/login.css” rel=”stylesheet” />      
  13.         <link type=”text/css” href=”css/smoothness/jquery-ui-1.7.2.custom.html” rel=”stylesheet” />     
  14.         <script type=”text/javascript” src=”js/jquery-1.3.2.min.js”></script>  
  15.         <script type=”text/javascript” src=”js/easyTooltip.js”></script>  
  16.         <script type=”text/javascript” src=”js/jquery-ui-1.7.2.custom.min.js”></script>  
  17.         <!– End of Libraries –>   
  18.     </head>  
  19.     <body>  
  20.     <div id=”container”>  
  21.         <div class=”logo”>  
  22.             <a href=”#”><img src=”logo.png” alt=”” /></a>  
  23.         </div>  
  24.         <div id=”box”>  
  25.             <form action=”dologin.jsp” method=”post”>  
  26.             <p class=”main”>  
  27.                 <label>用户名: </label>  
  28.                 <input name=”username” value=”” />   
  29.                 <label>密码: </label>  
  30.                 <input type=”password” name=”password” value=””>    
  31.             </p>  
  32.             <p class=”space”>  
  33.                 <input type=”submit” value=”登录” class=”login” style=”cursor: pointer;”/>  
  34.             </p>  
  35.             </form>  
  36.         </div>  
  37.     </div>  
  38.     </body>  
  39. </html>  

<body>
  <div id=”w”>
    <div id=”content”>
      <h1>World Currencies Autocomplete Search</h1>
      <p>Just start typing and results will be supplied from the
JavaScript. Check out <a
href=”
Autocomplete</a> on Github.</a></p>
      
      <div id=”searchfield”>
        <form><input type=”text” name=”currency”
class=”biginput” id=”autocomplete”></form>
      </div><!– @end #searchfield –>
      
      <div id=”outputbox”>
        <p id=”outputcontent”>Choose a currency and the results
will display here.</p>
      </div>
    </div><!– @end #content –>
  </div><!– @end #w –>
</body>
</html>

对登录的响应 dologin.jsp:

 

 

 

 

具体源码地址  

[java] view
plain copy

 

  1. <%@ page language=”java” import=”java.util.*” contentType=”text/html; charset=utf-8″%>  
  2. <%  
  3.   String path = request.getContextPath();  
  4.   String basePath = request.getScheme()+”://”+request.getServerName()+”:”+request.getServerPort()+path+”/”;  
  5.   String username =””;  
  6.   String password =””;  
  7.   request.setCharacterEncoding(“utf-8”);//防止中文乱码  
  8.     
  9.   username = request.getParameter(“username”);  
  10.   password = request.getParameter(“password”);  
  11.     
  12.   //如果用户和密码都等于admin,则登录成功  
  13.   if(“admin”.equals(username)&&”admin”.equals(password))  
  14.   {  
  15.      session.setAttribute(“loginUser”, username);  
  16.      request.getRequestDispatcher(“login_success.jsp”).forward(request, response);  
  17.        
  18.   }  
  19.   else  
  20.   {  
  21.      response.sendRedirect(“login_failure.jsp”);  
  22.   }  
  23. %>  

这里注意的是:

发表评论

电子邮件地址不会被公开。 必填项已用*标注