如何在PHP下拉选择框中实现多关键词筛选功能

需求说明 #

需要展示一个select下拉选择框，并支持多关键词筛选。
示例数据：

FRAMEWORK CONTRACT TO CONTRACT 19/ 2023, 
SUPPLEMENT TO THE FRAMEWORK CONTRACT 1 / 2022
SUPPLEMENT TO THE SPECIFIC CONTRACT 1/2023

期望实现筛选「2023年的FRAMEWORK CONTRACT」的功能。当前实现下拉框的PHP代码如下，需改造以支持多词筛选：

Seleccione...... 
<?php
  $aux_consult = mysqli_query($conexion, "SELECT * FROM `contratos` ");
   while ($resultados = mysqli_fetch_array($aux_consult)) {
    
     echo '<option value="' . $resultados['id'] . '">" '. $resultados['id_contrato'] . '-' . $tipo_nombre . ' ' . $resultados['no_ctto'] . ' /' . $resultados['anno'].'</option>';
  }
    
?>  </select>

改造方案 #

通过前端添加搜索输入框，结合JavaScript实现多关键词实时过滤下拉选项。后端保持原有数据查询逻辑，先输出所有选项，再由前端处理筛选逻辑。

完整代码示例 #

<!-- 筛选输入框 -->
<input type="text" id="contractSearch" placeholder="输入关键词筛选（多词用空格分隔）">

<!-- 下拉选择框 -->
<select id="contractSelect" size="6"> <!-- size控制显示行数，可按需调整 -->
    <option value="">Seleccione......</option>
    <?php
    $aux_consult = mysqli_query($conexion, "SELECT * FROM `contratos` ");
    while ($resultados = mysqli_fetch_array($aux_consult)) {
        // 拼接选项文本，确保格式统一
        $optionText = $resultados['id_contrato'] . '-' . $tipo_nombre . ' ' . $resultados['no_ctto'] . ' /' . $resultados['anno'];
        // 用htmlspecialchars防止XSS注入
        echo '<option value="' . $resultados['id'] . '">' . htmlspecialchars($optionText) . '</option>';
    }
    ?>
</select>

<script>
const searchInput = document.getElementById('contractSearch');
const selectElement = document.getElementById('contractSelect');
const allOptions = Array.from(selectElement.options);

searchInput.addEventListener('input', function() {
    // 将输入的关键词拆分为数组，统一转为小写，忽略空字符串
    const keywords = this.value.trim().toLowerCase().split(/\s+/).filter(k => k);
    
    allOptions.forEach(option => {
        const optionText = option.textContent.toLowerCase();
        // 检查所有关键词是否都存在于选项文本中
        const isMatch = keywords.every(keyword => optionText.includes(keyword));
        option.style.display = isMatch ? 'block' : 'none';
    });
});
</script>

功能说明 #

• 多关键词筛选：输入多个关键词（用空格分隔，比如framework contract 2023），只会显示同时包含所有关键词的选项。
• 不区分大小写：输入大写或小写关键词都能匹配到对应选项。
• 安全优化：添加htmlspecialchars()处理选项文本，避免XSS注入风险。
• 实时响应：输入框内容变化时，下拉选项会立即更新筛选结果。

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