CODEWITHSUNDEEP
htmlflaskdrop-down-menuhtml-select
Asi
Asi

Reputation: 1

HTML Multi-Selective Dropdown using a list which passes through flask's render_template()

I'm writing in Python for 2 years but totaly new to html, and struggles with finding the right solution for my need. I'd love some guidence from syntax to effectiveness, and open for suggestions :

I'm working with flask , pulling a data list (string values) from a BigQuery table one column, 8000~ string values, I wish to present the list in my UI as a multi-selective Dropdown. Limit of how many selections can be made-- up to 30. Passing it through the "render_template" flask function to my HTML code file , I couldn't figure how should I implement a multi selective dropdown which its content is my data list.

data_df = get_bq_table_as_df()
data_lst = data_df.to_list()
    return render_template("tool_kpi.html", kpis=data_lst)

my html code (after "input=class" row, I wish to put my dropdown objet content):

 <div class="card" id="div_SetConfig">
        <form>
                <h2><svg class="icon" aria-hidden="true"></svg>KPI Name</h2>
                <label class="input">
                    <input class="input__field" type="Dropdown" id="KPI Name"/>      
                    <span class="input__label">Please choose your exact KPI</span>
                </label>

The UI is (don't mind the styling):user input

I don't really care of how the dropdown menu would seem, as long as it allows multi-selection, with the functionality of showing every value, with a character-typing filter (values with the typed characters appear to the user)

Upvotes: 0

Views: 935

Answers (1)

NoCommandLine
NoCommandLine

Reputation: 6298

To allow for multiple selection in a select element, add the attribute multiple to your select element. See the documentation. Your code should then be something like this

    <select name="myselect" multiple>
        {% for k in kpis %} 
            <option value="{{k}}">{{k}}</option>
        {% endfor %}
    </select>

To allow for filtering the list when user starts typing, you'll need a plugin. Google - 'multi select plugins' and find something that works for you.

Upvotes: 1

Related Questions