AJAX,JSON搜索智能提示

效果

开发结构参考AJAX,JSON用户校验

主要有两个核心文件

1，处理输入字符，进行后台搜索的servlet

Suggest.java

 1 package org.guangsoft.servlet;
 2 
 3 import java.io.IOException;
 4 import java.io.PrintWriter;
 5 import java.sql.Connection;
 6 import java.sql.PreparedStatement;
 7 import java.sql.ResultSet;
 8 import java.util.ArrayList;
 9 import java.util.List;
10 
11 import javax.servlet.ServletException;
12 import javax.servlet.http.HttpServlet;
13 import javax.servlet.http.HttpServletRequest;
14 import javax.servlet.http.HttpServletResponse;
15 
16 import org.guangsoft.dao.SqlHelper;
17 
18 import com.google.gson.Gson;
19 
20 public class Suggest extends HttpServlet
21 {
22 
23     public void doGet(HttpServletRequest request, HttpServletResponse response)
24             throws ServletException, IOException
25     {
26         processRequest(request, response);
27     }
28 
29     public void doPost(HttpServletRequest request, HttpServletResponse response)
30             throws ServletException, IOException
31     {
32         processRequest(request, response);
33     }
34 
35     protected void processRequest(HttpServletRequest request,
36             HttpServletResponse response) throws ServletException, IOException
37     {
38         request.setCharacterEncoding("UTF-8");
39         response.setCharacterEncoding("UTF-8");
40         response.setContentType("text/html; charset=utf-8");
41         PrintWriter out = response.getWriter();
42         String word = request.getParameter("word");
43         Connection connection = null;
44         PreparedStatement prepareStatement = null;
45         ResultSet resultSet = null;
46         List wordList = new ArrayList<String>();
47         try
48         {
49             connection = SqlHelper.getConnection();
50             String sql = "select * from user where username like ? limit 0,5";
51             prepareStatement = connection.prepareStatement(sql);
52             prepareStatement.setString(1,"%"+word+"%");
53             resultSet = prepareStatement.executeQuery();
54             while(resultSet.next())
55             {
56                 wordList.add(resultSet.getString("username"));
57             }
58             Gson gson = new Gson();
59             response.getWriter().print(gson.toJson(wordList));
60         }
61         catch(Exception e)
62         {
63             e.printStackTrace();
64         }
65         finally
66         {
67             SqlHelper.close(connection, prepareStatement, resultSet);
68         }
69     }
70 }

 

2，展示前台

suggest.java

 1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
 2 <%
 3 String path = request.getContextPath();
 4 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
 5 %>
 6 
 7 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 8 <html>
 9   <head>
10     <base href="<%=basePath%>">
11     <script src="/ajax/js/AjaxUtil.js"></script>
12     <style>
13         #div01
14         {
15             border:1px gray solid;
16             width:312px;
17             height:115px;
18             display:none; 
19         }
20         li
21         {
22             list-style:none;
23             width:310px;
24         }
25         li:hover
26         {
27             background-color: aqua;
28             cursor:pointer;
29         }
30         
31     </style>
32     <script>
33         function search(word)
34         {
35             var div01 = document.getElementById("div01");
36             if(word != "")
37             {
38                 sendAjaxReq("get","suggest?word="+word,null,function(data)
39                 {
40                     eval("var wordList="+data);
41                     div01.innerHTML = "";
42                     if(wordList.length != 0)
43                     {
44                         for(var i = 0; i < wordList.length; i++)
45                         {
46                             div01.innerHTML += "<li onclick='setWord(this);'>"+wordList[i]+"</li>"
47                         }
48                         div01.style.display = "block";
49                     }
50                 });
51             }
52             else
53             {
54                 div01.style.display ="false";                
55             }
56         }
57         function setWord(li)
58         {
59             document.getElementById("word").value = li.innerHTML;
60             document.getElementById("div01").innerHTML = "";
61         }
62     </script>
63   </head>
64   
65   <body>
66   <div id="showDiv">
67       <input type="text" name="word" id="word" size="40"
68           onkeyup="search(this.value);" />
69       <input type="button" value="百度一下" onclick="search()">
70       <div name="div01" class="div01" id="div01"></div>
71   </div>
72   </body>
73 </html>

 

posted @ 2016-10-24 20:01  光何  阅读(302)  评论(0)  编辑  收藏  举报