在Jakarta EE10 NetBeans项目中为JSP下拉框添加搜索过滤功能

针对你的需求，下面提供三种无需修改现有数据填充逻辑的实现方案，适配你的Apache NetBeans Java Web项目：

方案一：纯JavaScript实现（无额外依赖） #

原生<select>不支持输入搜索，我们可以通过添加输入框配合JS动态过滤选项来实现，无需引入任何第三方库：

1. 在原下拉框上方添加搜索输入框：

<div class="mb-3">
  <label for="idUsuario" class="form-label">Usuario</label>
  <!-- 添加搜索输入框 -->
  <input type="text" id="searchUsuario" class="form-control mb-2" placeholder="搜索用户...">
  <select class="form-select" id="idUsuario" name="idUsuario" required>
    <option value="" disabled selected>Seleccionar Usuario</option>
    <% 
        PreparedStatement psUsuarios2 = con.prepareStatement("SELECT IdUsuario, Nombres FROM Usuario WHERE EstadoRegistro = 1");
        ResultSet rsUsuarios2 = psUsuarios2.executeQuery();
        while (rsUsuarios2.next()) {
    %>
    <option value="<%= rsUsuarios2.getInt("IdUsuario") %>"><%= rsUsuarios2.getString("Nombres") %></option>
    <% } rsUsuarios2.close(); psUsuarios2.close(); %>
  </select>
</div>

2. 在页面底部添加JS过滤逻辑：

<script>
document.getElementById('searchUsuario').addEventListener('input', function() {
    const searchTerm = this.value.toLowerCase();
    const select = document.getElementById('idUsuario');
    const options = select.querySelectorAll('option');
    
    options.forEach(option => {
        // 跳过默认禁用选项
        if (option.disabled) return;
        const text = option.textContent.toLowerCase();
        option.style.display = text.includes(searchTerm) ? 'block' : 'none';
    });
    
    // 无匹配项时重置选中状态（可选）
    const visibleOptions = Array.from(options).filter(opt => opt.style.display !== 'none' && !opt.disabled);
    if (visibleOptions.length === 0) {
        select.selectedIndex = 0;
    }
});
</script>

方案二：使用Bootstrap Select（轻量依赖，适配现有样式） #

从你的代码中的form-select类判断，项目应该已经使用Bootstrap，直接用Bootstrap Select组件即可快速实现搜索功能：

1. 引入Bootstrap Select的CSS和JS（建议下载到本地项目目录，避免依赖外部CDN）：

<!-- 在页面<head>中引入样式 -->
<link rel="stylesheet" href="assets/css/bootstrap-select.min.css">
<!-- 在页面底部、Bootstrap JS之后引入脚本 -->
<script src="assets/js/bootstrap-select.min.js"></script>

2. 修改原<select>标签并初始化组件：

<div class="mb-3">
  <label for="idUsuario" class="form-label">Usuario</label>
  <!-- 添加data-live-search属性开启搜索 -->
  <select class="form-select" id="idUsuario" name="idUsuario" required data-live-search="true">
    <option value="" disabled selected>Seleccionar Usuario</option>
    <% 
        PreparedStatement psUsuarios2 = con.prepareStatement("SELECT IdUsuario, Nombres FROM Usuario WHERE EstadoRegistro = 1");
        ResultSet rsUsuarios2 = psUsuarios2.executeQuery();
        while (rsUsuarios2.next()) {
    %>
    <option value="<%= rsUsuarios2.getInt("IdUsuario") %>"><%= rsUsuarios2.getString("Nombres") %></option>
    <% } rsUsuarios2.close(); psUsuarios2.close(); %>
  </select>
</div>

<script>
// 页面加载完成后初始化组件
$(document).ready(function() {
    $('#idUsuario').selectpicker();
});
</script>

注意：Bootstrap Select依赖jQuery，若项目未引入jQuery，需要先添加jQuery的引用。

方案三：后端动态搜索（适合大量数据场景） #

如果用户数据量庞大，一次性加载所有选项会影响性能，可以通过AJAX联动后端Servlet实现按需搜索：

1. 前端修改为输入框+空下拉框：

<div class="mb-3">
  <label for="idUsuario" class="form-label">Usuario</label>
  <input type="text" id="searchUsuario" class="form-control mb-2" placeholder="搜索用户...">
  <select class="form-select" id="idUsuario" name="idUsuario" required>
    <option value="" disabled selected>Seleccionar Usuario</option>
  </select>
</div>

2. 编写处理搜索请求的Servlet：

@WebServlet("/search-usuario")
public class SearchUsuarioServlet extends HttpServlet {
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setContentType("application/json");
        String searchTerm = request.getParameter("term");
        
        List<Map<String, Object>> usuarios = new ArrayList<>();
        // 替换为你的数据库连接获取逻辑
        try (Connection con = DatabaseConnection.getConnection();
             PreparedStatement ps = con.prepareStatement("SELECT IdUsuario, Nombres FROM Usuario WHERE EstadoRegistro = 1 AND Nombres LIKE ?")) {
            ps.setString(1, "%" + searchTerm + "%");
            ResultSet rs = ps.executeQuery();
            while (rs.next()) {
                Map<String, Object> usuario = new HashMap<>();
                usuario.put("id", rs.getInt("IdUsuario"));
                usuario.put("nombre", rs.getString("Nombres"));
                usuarios.add(usuario);
            }
        } catch (SQLException e) {
            e.printStackTrace();
        }
        
        // 序列化为JSON返回
        ObjectMapper mapper = new ObjectMapper();
        mapper.writeValue(response.getWriter(), usuarios);
    }
}

需要在pom.xml中添加Jackson依赖以支持JSON序列化：

<dependency>
    <groupId>com.fasterxml.jackson.core</groupId>
    <artifactId>jackson-databind</artifactId>
    <version>2.15.2</version>
</dependency>

3. 前端AJAX请求逻辑：

<script>
const searchInput = document.getElementById('searchUsuario');
const select = document.getElementById('idUsuario');

searchInput.addEventListener('input', function() {
    const searchTerm = this.value.trim();
    // 输入至少2个字符再发起搜索，减少请求次数
    if (searchTerm.length < 2) {
        while (select.options.length > 1) {
            select.remove(1);
        }
        return;
    }
    
    fetch(`search-usuario?term=${encodeURIComponent(searchTerm)}`)
        .then(response => response.json())
        .then(data => {
            // 清空现有选项（保留默认）
            while (select.options.length > 1) {
                select.remove(1);
            }
            // 添加搜索到的用户选项
            data.forEach(usuario => {
                const option = document.createElement('option');
                option.value = usuario.id;
                option.textContent = usuario.nombre;
                select.appendChild(option);
            });
        })
        .catch(error => console.error('搜索出错:', error));
});
</script>

内容的提问来源于stack exchange，提问作者Chris Cars