1、前言
由于目前顯示在select中的option太多，是以覺得采用select2插件進行ajax背景查詢。此方式不僅提升了通路速度，還能使使用者的體驗感上一個層次。
2、準備
項目環境：tomcat9，jdk1.8
項目插件：select2, jquery
select2下載下傳位址：https://github.com/select2/select2
select2官網：https://select2.org/
3、開發
實作效果圖：
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>
![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)