Select2实现后台查询搜索

Bertha 。 2023-07-18 09:19 21阅读 0赞

## 1、前言 ##

由于目前显示在select中的option太多，所以觉得采用select2插件进行ajax后台查询。此方式不仅提升了访问速度，还能使用户的体验感上一个层次。

## 2、准备 ##

项目环境：tomcat9，jdk1.8  
项目插件：select2, jquery  
select2下载地址：[https://github.com/select2/select2][https_github.com_select2_select2]  
select2官网：[https://select2.org/][https_select2.org]

## 3、开发 ##

实现效果图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RodGhjYw_size_16_color_FFFFFF_t_70]

Java后台代码：

package nicole;
    
    import java.io.IOException;
    import java.sql.Connection;
    import java.sql.DriverManager;
    import java.sql.PreparedStatement;
    import java.sql.ResultSet;
    import java.sql.SQLException;
    import java.util.ArrayList;
    import java.util.HashMap;
    import java.util.List;
    import java.util.Map;
    
    import javax.servlet.ServletException;
    import javax.servlet.ServletOutputStream;
    import javax.servlet.annotation.WebServlet;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    
    import com.fasterxml.jackson.databind.ObjectMapper;
    
    @WebServlet("/servlet/nicole.SelectDemo")
    public class SelectDemo extends HttpServlet { 
    	private static final long serialVersionUID = 1L;
    
    	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { 
    		Connection con = null;
    		try { 
    			con = getConnection();
    			String searchCode = req.getParameter("search");
    			List<Map<String, String>> list = getSelectDemoList(con, searchCode);
    			resp.setContentType("application/x-json;charset=UTF-8");
    			ServletOutputStream out = resp.getOutputStream();
    		    ObjectMapper objectMapper = new ObjectMapper();
    		    objectMapper.writeValue(out, list);
    		    out.flush();
    			
    		} catch (Exception e) { 
    			e.printStackTrace();
    		} finally { 
    			try { 
    				con.close();
    			} catch (SQLException e) { 
    				e.printStackTrace();
    			}
    		}
    	}
    
    	private Connection getConnection() throws SQLException { 
    		Connection con = null;
    		try { 
    			Class.forName("oracle.jdbc.driver.OracleDriver");
    			String url = "jdbc:oracle:thin:@127.0.0.1:1526:nicolesv";
    			String user = "nicole";
    			String password = "abc123";
    			con = DriverManager.getConnection(url, user, password);
    		} catch (ClassNotFoundException e) { 
    			e.printStackTrace();
    		}
    		return con;
    	}
    
    	private List<Map<String, String>> getSelectDemoList(Connection con, String searchCode) throws Exception { 
    		PreparedStatement pstm = null;
    		ResultSet rs = null;
    		List<Map<String, String>> list = new ArrayList<Map<String, String>>();
    
    		String sql = " SELECT TEXT text FROM SELECT_DEMO WHERE TEXT LIKE ?";
    		try { 
    			pstm = con.prepareStatement(sql);
    			pstm.setString(1, "%" + searchCode + "%");
    			rs = pstm.executeQuery();
    			while (rs.next()) { 
    				Map<String, String> map = new HashMap<String, String>();
    				map.put("value", rs.getString("text"));
    				map.put("label", rs.getString("text"));
    				list.add(map);
    			}
    			return list;
    		} catch (Exception e) { 
    			throw new Exception(e);
    		} finally { 
    			rs.close();
    			pstm.close();
    		}
    	}
    
    	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { 
    		doPost(req, resp);
    	}
    }

Html代码：

<%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <%
    	String ctx = request.getContextPath();
    %>
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="../../js/jquery-2.2.4.js"></script>
    	<script type="text/javascript" src="../../js/select2.min.js"></script>
    	<link href="../../js/select2.min.css" rel="stylesheet" />
    </head>
     
    <body>
        <h1>Select2访问后台</h1>
        <div class="s1-example">
           	<select id="selectDemo" style="width:250px;" name="selectDemo" ></select>
        </div>
        <script type="text/javascript">
        $(document).ready(function() { 
        	$("#selectDemo").select2({ 
        		ajax: { 
        	    url: "<%=ctx%>/servlet/nicole.SelectDemo",
        	    dataType: 'json',
        	    delay: 250,
        	    data: function (params) { 
        	        var query = { 
        	    		search: params.term,
    // page: params.page || 1
        	        }
        	   		return query;
        	    },
        	    processResults: function (data) { 
        		var array = data;
        		var i = 0;
        	    while(i < array.length){ 
        	        array[i]["id"] = array[i]['value'];
        	        array[i]["text"] = array[i]['label'];
        	        delete array[i]["value"];
        	        delete array[i]["label"];
        	  		i++;
        	    }
        	         return { 
        	             results: array
        	         };
        	      },
        	    cache: true
        	  },
        	  
        	  placeholder: 'Search for a select demo',
        	  escapeMarkup: function (markup) { return markup; },
        	  minimumInputLength: 3,
    // templateResult : format,
        	  templateSelection: formatSelect
        	});
        });
    
    
        function format(results){ 	
        	if (results.loading) { 
        		return results.text;
        	}
        	if(results.id){ 
        		return '<option value="'+ results.id +'">' + results.text + '</option>';
        	}	
        }
    
        function formatSelect(results){ 
        	  return results.id || results.text;
        }
        </script>
    </body>
     
    </html>

[https_github.com_select2_select2]: https://github.com/select2/select2
[https_select2.org]: https://select2.org/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RodGhjYw_size_16_color_FFFFFF_t_70]: /images/20230528/a2f21531ea754b88809b85790008a460.png