Pug模板引擎中是否有任何等效功能,例如datalist(html 5)或类似功能?

时间:2018-06-20 19:18:33

标签: pug

我在哈巴狗模板视图中有一个小表格,因为我有一个特定的字段,可以从数据库中查询并显示为可供用户选择的选项,但是如果首选选项不可用,那么我希望用户手动输入并提交。在html5中,我已经使用数据列表完成了此操作,这很简单。但是可以用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')

可以和哈巴狗一起吗?

1 个答案:

答案 0 :(得分:1)

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

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

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