Flask页面JS与HTML实现带搜索下拉框的整合及过滤问题求助

你现在的问题是额外加了一个独立搜索框，但Selectize.js本身就自带内嵌搜索和过滤功能，不需要单独写input。另外你大概率没引入Selectize的样式文件，导致组件显示不符合预期。下面是修正后的完整方案：

第一步：引入Selectize依赖 #

先在页面里加载Selectize的CSS、JS以及它依赖的jQuery（用CDN最方便）：

<!-- Selectize样式文件 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.15.2/css/selectize.default.min.css">
<!-- jQuery（Selectize必须依赖它） -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<!-- Selectize核心JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.15.2/js/selectize.min.js"></script>

第二步：简化HTML结构 #

删掉多余的独立搜索框，只保留label和select标签即可——Selectize会自动把普通select转换成带内嵌搜索的下拉组件：

<div class="dropdown">
  <label for="selectOptions">Fund Data</label>
  <select id="selectOptions">
    {% for fund in funds %}
     <option value="{{ fund }}">{{ fund }}</option>
    {% endfor %}
  </select>
</div>

第三步：优化Selectize初始化配置 #

调整JS代码，明确开启搜索过滤规则，同时设置友好的提示文本：

$(document).ready(function () {
    $('#selectOptions').selectize({
        sortField: 'text',
        create: false,
        // 指定搜索匹配的字段（对应option的文本内容）
        searchField: ['text'],
        // 设置搜索框的占位提示
        placeholder: 'Search funds...',
        render: {
            option: function (data, escape) {
                 return '<div>' + escape(data.text) + '</div>';
            },
        },
        // 可选：优化搜索匹配的权重，让短文本匹配优先级更高
        score: function(search) {
            var score = this.getScoreFunction(search);
            return function(item) {
                return score(item) * (1 + Math.min(item.text.length / 100, 1));
            };
        }
    });
});

关键注意点 #

• 你之前写的showList函数没用，直接删掉就行——Selectize已经自带下拉展开/收起的交互逻辑
• 必须引入Selectize的CSS文件，否则组件会显示成普通下拉框的样子
• 如果需要自定义组件样式，可以修改.selectize-input、.selectize-dropdown这类Selectize自带的CSS类

这样修改后，你的下拉组件会自动内嵌搜索框，输入内容时会实时过滤匹配的基金选项，完全符合需求。

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