时间戳

首页 > 解决方案 > 在 pug 模板引擎中是否有类似 datalist(html 5) 或类似功能的等效功能？

pug - 在 pug 模板引擎中是否有类似 datalist(html 5) 或类似功能的等效功能？

问题描述

我在哈巴狗模板视图中有一个小表单。我有一个特定字段，我从数据库中查询并显示为供用户选择的选项。但是如果首选选项不可用，那么我希望用户手动输入并提交它。在 html5 中，我使用 datalist 完成了这个，它非常简单。但是有没有办法用 pug 视图来做到这一点。请帮我解决这个问题。

表格看起来与此类似

    extends layout

    block content
      h1 #{title}
      form(method='POST', action='/projects/reg_project')
        #form-group
          input.form-control(name='name', type='text' placeholder='Name' value=username)
          br
        #form-group
          input.form-control(name='email', type='text' placeholder='Email' value=email)
          br
        #form-group
          input.radio-inline(name='position',type='radio',value='team')
          label Team
          input.radio-inline(name='position',type='radio',value='individual')
          label Lone wolf
          br
        #form-group
<!--right now it is simple text field,I need to change something similar to datalist view -->
          input.form-control(name='teamname', type='text' placeholder='TeamName')
          br
        #form-group
          input.form-control(name='project_title', type='text' placeholder='Project Title')
          br
        #form-group
          textarea.form-control(name='project_description' placeholder='Project Description')
          br
        #form-group
          input(type='checkbox' name='experience') 
          label Done project before
        #form-group
          input(type='checkbox' name='mentor' checked) 
          label Mentor needed

        input.btn.btn-primary(type='submit',value='Submit')

可以和pug做吗？

标签： pug

解决方案

当然，您可以使用相同的语法

input(id='inp1' list='browsers')

datalist(id='browsers')
    option(value='IE')
    option(value='FF')

推荐阅读