如何通过Flask将Python列表渲染为网页datalist组件？

我来帮你把这个功能完整实现出来，其实只需要补全Flask的路由逻辑，再调整下模板里的小细节就搞定了：

1. 补全main.py的完整代码 #

你现在的main.py只写了开头部分，需要添加路由函数、定义数据源列表，并在渲染模板时把数据传递给前端：

from flask import Flask, render_template

# 初始化Flask应用，__name__是固定写法，让Flask知道去哪里找模板文件
app = Flask(__name__)

# 定义路由，访问根路径时触发这个函数
@app.route('/')
def show_school_list():
    # 这里就是你要传递给datalist的Python数据源列表
    high_schools = [
        "第一中学",
        "第二中学",
        "第三高级中学",
        "实验中学",
        "外国语学校"
    ]
    # 渲染trying.html模板，同时把high_schools列表以hsch的名字传递过去
    return render_template('trying.html', hsch=high_schools)

# 运行Flask应用，debug=True方便开发时自动刷新
if __name__ == '__main__':
    app.run(debug=True)

2. 修正trying.html的模板语法细节 #

你原来的HTML里option标签的value属性没有加引号，这在元素值包含空格或特殊字符时会出问题，建议加上双引号：

<!DOCTYPE html>
<html>
<body>
<form>
  <input list="hschools" name="hschool" placeholder="选择学校">
  <datalist id="hschools">
    {% for elem in hsch %}
      <option value="{{ elem }}">
    {% endfor %}
  </datalist>
  <input type="submit" value="提交">
</form>
</body>
</html>

3. 项目结构和运行注意事项 #

• 确保你的项目文件夹结构是这样的：

  你的项目文件夹/
    main.py
    templates/
      trying.html
  

  Flask默认会从templates文件夹里找模板文件，所以必须把HTML文件放在这个目录下
• 运行main.py，然后在浏览器访问http://localhost:5000，就能看到带下拉提示的输入框了

这样就能完美实现从Python列表生成datalist的功能啦～

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