使用wtforms、Flask、JavaScript实现下拉列表搜索过滤功能问题咨询

问题根因 #

你当前的实现存在两个核心问题：

• 原生<select>标签的下拉列表是浏览器内置渲染的，你额外套的.dropdown-content容器里的<option>不会被原生下拉识别，同时搜索框被放在了点击才显示的下拉容器内，自然无法正常显示和输入
• 过滤逻辑针对的是.dropdown-content里的option，和你渲染的form.alimento_select原生下拉的option完全是分离的，所以过滤不生效

修改方案 #

1. 表单代码修改 #

不要用原生select作为触发按钮，改用普通按钮承载选中值，所有选项和搜索框都放在自定义的下拉容器内：

<form method="POST">
    {{ form.csrf_token }}
    <div class='form-group'>
        {{ form.alimento_select.label }}
        <div class="dropdown">
            <!-- 替换原生select为显示选中值的按钮 -->
            <button type="button" class="dropbtn" onclick="myFunction()" id="selectedVal">请选择</button>
            <!-- 隐藏原生select用于提交表单 -->
            {{ form.alimento_select(class_="d-none", id="realSelect") }}
            <div id="myDropdown" class="dropdown-content"> 
                {{ form.search(id="myInput", onkeyup="filterFunction()", placeholder="搜索选项...") }}
                <!-- 选项列表容器 -->
                <div id="optionList">
                    {% for val, label in form.alimento_select.choices %}
                    <div class="option-item" data-value="{{ val }}">{{ label }}</div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
</form>

这里加了一个隐藏的原生select用来同步选中值，保证表单提交逻辑不变

2. JS代码修改 #

补充选项点击赋值逻辑，修正下拉显示逻辑：

<script>
// 切换下拉显示
function myFunction() {
    document.getElementById("myDropdown").classList.toggle("show");
    // 下拉打开时自动聚焦搜索框
    if (document.getElementById("myDropdown").classList.contains("show")) {
        document.getElementById("myInput").focus();
    }
}

// 过滤选项
function filterFunction() {
    var input, filter, optionList, options, i, txtValue;
    input = document.getElementById("myInput");
    filter = input.value.toUpperCase();
    optionList = document.getElementById("optionList");
    options = optionList.getElementsByClassName("option-item");
    for (i = 0; i < options.length; i++) {
        txtValue = options[i].textContent || options[i].innerText;
        if (txtValue.toUpperCase().indexOf(filter) > -1) {
            options[i].style.display = "";
        } else {
            options[i].style.display = "none";
        }
    }
}

// 点击选项赋值
document.querySelectorAll(".option-item").forEach(item => {
    item.addEventListener("click", function() {
        const val = this.getAttribute("data-value");
        const label = this.textContent;
        // 同步到隐藏的原生select
        document.getElementById("realSelect").value = val;
        // 修改按钮显示文本
        document.getElementById("selectedVal").textContent = label;
        // 关闭下拉
        document.getElementById("myDropdown").classList.remove("show");
    })
})

// 点击外部关闭下拉
window.onclick = function(e) {
    if (!e.target.matches('.dropbtn') && !e.target.closest('.dropdown')) {
        const dropdowns = document.getElementsByClassName("dropdown-content");
        for (let i = 0; i < dropdowns.length; i++) {
            const openDropdown = dropdowns[i];
            if (openDropdown.classList.contains('show')) {
                openDropdown.classList.remove('show');
            }
        }
    }
}
</script>

3. CSS代码修改 #

调整搜索框和选项的样式，保证布局正常：

/* 隐藏原生select的样式类 */
.d-none {
    display: none !important;
}

#myInput {
    box-sizing: border-box;
    background-image: url('searchicon.png');
    background-position: 14px 12px;
    background-repeat: no-repeat;
    font-size: 16px;
    padding: 14px 20px 12px 45px;
    border: none;
    border-bottom: 1px solid #ddd;
    width: 100%;
}

#myInput:focus {
    outline: 3px solid #ddd;
}

.dropdown {
    position: relative;
    display: inline-block;
}
.dropbtn {
    cursor: pointer;
    padding: 8px 16px;
    min-width: 230px;
    text-align: left;
}
.dropbtn:hover, .dropbtn:focus {
    background-color: #3e8e41;
    color: #fff;
}
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f6f6f6;
    min-width: 230px;
    border: 1px solid #ddd;
    z-index: 1;
    max-height: 300px;
    overflow-y: auto;
}
.option-item {
    padding: 12px 16px;
    cursor: pointer;
    display: block;
}

.option-item:hover {
    background-color: #f1f1f1
}

.show {
    display:block;
}

修改后搜索框会固定在下拉容器的顶部，点击下拉按钮直接显示，输入内容即可实时过滤选项。

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