HTML 元素动态弹出表单中字段的特定建议

Question

我正在使用 python+flask+werkzeug 开发一个数据库工具，并第一次学习如何使用它的大部分。 对于模板中的“机构”字段，当用户开始输入名称时，我希望适合模式的现有选项在下拉列表中弹出，然后如果在那个清单。 我找到了<select>元素，我可以找到一种方法来做到这一点。 然而，它只是硬编码的选择，无法输入，可能有数百个机构我不想把所有的都放在这里。 我不知道我正在寻找的元素的术语，所以我真的不知道要谷歌什么。 有什么想法吗？

{% extends 'base.html' %}

{% block header %}
<h1>{% block title %}Add New Member{% endblock %}</h1>
{% endblock %}

{% block content %}
<form method="post">
  <label for="full_name">Full Name</label>
  <input type="text" name="full_name" id="full_name" value="{{ request.form['full_name'] }}" required>
  <label for="phone_number">Phone #</label>
  <input type="tel" name="phone_number" id="phone_number" value="{{ request.form['phone_number'] }}">
  <label for="email">Email</label>
  <input type="email" name="email" id="email" value="{{ request.form['email'] }}">
  <label for="institution_name">Institution</label>
  <select id="institution_name" name="institution_name">
    {% for institution in institution %}
    <option value="{{ institution['institution_name'] }}">{{ institution['institution_name'] }}</option>
    {% endfor %}}
    <option value="not_found">Not found. Add new?</option>
  </select>
  <input type="submit" value="Submit">
</form>
{% endblock %}

Answer 1

有 JavaScript 插件允许这样做，例如Select2 ，但更简单的选择可能是为此使用datalist元素。

<div>
    <datalist id="institution_list">
        {% for institution in institution %}
        <option value="{{ institution['institution_name'] }}">{{ institution['institution_name'] }}</option>
        {% endfor %}}
    </datalist>
    <input  autoComplete="on" list="institution_list"/> 
</div>