AJAX,JSON搜索智能提示

时间：2022-01-10 18:13:45

效果

AJAX,JSON搜索智能提示

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

主要有两个核心文件

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

Suggest.java

 package org.guangsoft.servlet;

 import java.io.IOException;

 import java.io.PrintWriter;

 import java.sql.Connection;

 import java.sql.PreparedStatement;

 import java.sql.ResultSet;

 import java.util.ArrayList;

 import java.util.List;

 import javax.servlet.ServletException;

 import javax.servlet.http.HttpServlet;

 import javax.servlet.http.HttpServletRequest;

 import javax.servlet.http.HttpServletResponse;

 import org.guangsoft.dao.SqlHelper;

 import com.google.gson.Gson;

 public class Suggest extends HttpServlet

 {

     public void doGet(HttpServletRequest request, HttpServletResponse response)

             throws ServletException, IOException

     {

         processRequest(request, response);

     }

     public void doPost(HttpServletRequest request, HttpServletResponse response)

             throws ServletException, IOException

     {

         processRequest(request, response);

     }

     protected void processRequest(HttpServletRequest request,

             HttpServletResponse response) throws ServletException, IOException

     {

         request.setCharacterEncoding("UTF-8");

         response.setCharacterEncoding("UTF-8");

         response.setContentType("text/html; charset=utf-8");

         PrintWriter out = response.getWriter();

         String word = request.getParameter("word");

         Connection connection = null;

         PreparedStatement prepareStatement = null;

         ResultSet resultSet = null;

         List wordList = new ArrayList<String>();

         try

         {

             connection = SqlHelper.getConnection();

             String sql = "select * from user where username like ? limit 0,5";

             prepareStatement = connection.prepareStatement(sql);

             prepareStatement.setString(1,"%"+word+"%");

             resultSet = prepareStatement.executeQuery();

             while(resultSet.next())

             {

                 wordList.add(resultSet.getString("username"));

             }

             Gson gson = new Gson();

             response.getWriter().print(gson.toJson(wordList));

         }

         catch(Exception e)

         {

             e.printStackTrace();

         }

         finally

         {

             SqlHelper.close(connection, prepareStatement, resultSet);

         }

     }

 }

2，展示前台

suggest.java

 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

 <%

 String path = request.getContextPath();

 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

 %>

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

 <html>

   <head>

     <base href="<%=basePath%>">

     <script src="/ajax/js/AjaxUtil.js"></script>

     <style>

         #div01

         {

             border:1px gray solid;

             width:312px;

             height:115px;

             display:none;

         }

         li

         {

             list-style:none;

             width:310px;

         }

         li:hover

         {

             background-color: aqua;

             cursor:pointer;

         }

     </style>

     <script>

         function search(word)

         {

             var div01 = document.getElementById("div01");

             if(word != "")

             {

                 sendAjaxReq("get","suggest?word="+word,null,function(data)

                 {

                     eval("var wordList="+data);

                     div01.innerHTML = "";

                     if(wordList.length != 0)

                     {

                         for(var i = 0; i < wordList.length; i++)

                         {

                             div01.innerHTML += "<li onclick='setWord(this);'>"+wordList[i]+"</li>"

                         }

                         div01.style.display = "block";

                     }

                 });

             }

             else

             {

                 div01.style.display ="false";

             }

         }

         function setWord(li)

         {

             document.getElementById("word").value = li.innerHTML;

             document.getElementById("div01").innerHTML = "";

         }

     </script>

   </head>

   <body>

   <div id="showDiv">

       <input type="text" name="word" id="word" size="40"

           onkeyup="search(this.value);" />

       <input type="button" value="百度一下" onclick="search()">

       <div name="div01" class="div01" id="div01"></div>

   </div>

   </body>

 </html>

相关文章