搜索框未与 JavaScript 和 HTML 中的下拉菜单集成

Question

我是 JS 和 HTML 新手，正在尝试在 Flask 中创建一个网页，其中包含一个包含过滤选项的搜索框的下拉列表。

我的代码如下：

<div class="dropdown">
<label for="searchInput">Fund Data </label>
<input type="text" placeholder="Search.." id="searchInput" onkeyup="">
<select id="selectOptions">
    {% for fund in funds %}
     <option value="{{ fund }}">{{ fund }}</option>
    {% endfor %}
</select>
</div>

<script>

function showList() {
  document.getElementById("searchInput").classList.toggle("show");
}

$(document).ready(function () {
    $('#selectOptions').selectize({
        sortField: 'text', // Sort options alphabetically
        create: false, // Disable creating new options
        render: {
            option: function (data, escape) {
                 return '<div>' + escape(data.text) + '</div>';
            },
        },
    });
}) ;

</script>

下拉菜单如下所示：

我似乎无法将搜索框集成到下拉框中或让搜索框影响搜索过滤器。

任何帮助将不胜感激，如果需要更多信息，请告诉我。

Answer 1

假设您有一个 Flask 路由，使用填充了适当数据的资金变量来呈现此 HTML 模板：- 必须确保包含必要的 CSS 和 JavaScript 库

selectize.js

&
jQuery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fund Data</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.13.3/css/selectize.default.min.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.13.3/js/standalone/selectize.min.js"></script>
    <style>
        /* add cUSTOM STYLES HERE */
        .dropdown {
            margin-bottom: 20px;
        }
    </style>
</head>
<body>

<div class="dropdown">
    <label for="searchInput">Fund Data</label>
    <input type="text" placeholder="Search.." id="searchInput">
    <select id="selectOptions">
        {% for fund in funds %}
            <option value="{{ fund }}">{{ fund }}</option>
        {% endfor %}
    </select>
</div>

<script>
    $(document).ready(function () {
        $('#selectOptions').selectize({
            sortField: 'text', 
            create: false, // Disable creating new options
            render: {
                option: function (data, escape) {
                    return '<div>' + escape(data.text) + '</div>';
                },
            },
        });

        // Add event listener to filter options based on search input
        $('#searchInput').on('input', function () {
            var searchValue = $(this).val().toLowerCase();
            $('#selectOptions option').each(function () {
                var optionText = $(this).text().toLowerCase();
                var showOption = optionText.includes(searchValue);
                $(this).toggle(showOption);
            });
        });
    });
</script>

</body>
</html>

搜索框未与 JavaScript 和 HTML 中的下拉菜单集成

问题描述投票：0回答：1

1个回答

最新问题

搜索框未与 JavaScript 和 HTML 中的下拉菜单集成

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1