如何实现可搜索Select下拉菜单？规避Select2 CDN影响原有CSS

1. 先修正PHP代码的变量错误 #

原代码的foreach循环变量逻辑错误，会导致执行报错，先修正为正确写法：

<div>
    <select name="code" id="code">
        <option value="">Select Code...</option>
        <?php
        $rows = ["peter", "jones", "sakthi"];

        foreach ($rows as $row) {   ?>
            <option value="<?php echo htmlentities($row); ?>"><?php echo htmlentities($row); ?></option>
        <?php } ?>
    </select>
</div>

2. 用Select2实现无样式干扰的搜索功能 #

要避免Select2覆盖原有CSS，核心是不加载Select2默认样式文件，仅加载JS，同时通过配置让组件继承原生select的样式：

引入Select2 JS（仅加载JS） #

<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

初始化Select2并做样式隔离配置 #

document.addEventListener('DOMContentLoaded', function() {
    $('#code').select2({
        theme: 'none', // 禁用Select2自带主题样式
        minimumResultsForSearch: 1, // 有选项时就显示搜索框
        dropdownCssClass: 'native-dropdown-style', // 自定义下拉框类名，方便微调
        containerCssClass: 'native-select-style' // 自定义容器类名，继承原生样式
    });
});

可选：补充极简CSS保证样式完全继承 #

如果仍有细微样式差异，添加几行CSS让Select2元素完全匹配原生select：

.native-select-style {
    width: 100% !important;
    border: inherit !important;
    border-radius: inherit !important;
    padding: inherit !important;
    font: inherit !important;
}

.native-dropdown-style {
    font-family: inherit !important;
    color: inherit !important;
}

3. 替代方案：HTML5原生datalist（无第三方依赖） #

如果不想引入Select2，用原生HTML5的datalist也能实现搜索下拉，完全不干扰原有样式：

<div>
    <input list="code-options" name="code" id="code" placeholder="Select Code...">
    <datalist id="code-options">
        <?php
        $rows = ["peter", "jones", "sakthi"];
        foreach ($rows as $row) {   ?>
            <option value="<?php echo htmlentities($row); ?>"><?php echo htmlentities($row); ?></option>
        <?php } ?>
    </datalist>
</div>

该方案完全依赖原生HTML，无需额外JS/CSS，样式与你现有input样式完全一致，同时支持搜索筛选。

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