使用 Jade 和 Bootstrap 在 node.js 上标记和自动完成答案

【问题标题】：Tags and autocomplete on node.js with Jade and Bootstrap使用 Jade 和 Bootstrap 在 node.js 上标记和自动完成
【发布时间】：2013-02-20 15:32:07
【问题描述】：

我正在尝试在 stackoverflow 上实现像这里这样的标记功能，但是到目前为止，jade、jquery 的组合不是我可以克服的......我正在使用 bootstrap，所以 bootstrap-tagmanager 似乎是一个不错的选择，但我可以不要执行它。我在这里找到了这个小提琴：http://jsfiddle.net/vt2z4/ 但即使这样我也做不到。有人做过或有什么建议吗？

小提琴代码是

<input type="text" name="tags" placeholder="Tags" class="tagsManager"/>
<input type="hidden" value="Pisa,Rome" name="hiddenTagList">

Javascript：

$(function () {
    $(".tagsManager").tagsManager({
         prefilled: ["Pisa", "Rome"],
         CapitalizeFirstLetter: true,
         preventSubmitOnEnter: true,
         typeahead: true,
         typeaheadAjaxSource: null,
         typeaheadSource: ["Pisa", "Rome", "Milan", "Florence", "New York", "Paris",      "Berlin", "London", "Madrid"],
         delimeters: [44, 188, 13],
         backspace: [8],
         blinkBGColor_1: '#FFFF9C',
         blinkBGColor_2: '#CDE69C',
         hiddenTagListName: 'hiddenTagListA'
     });
});

【问题讨论】：

你好，我也遇到了同样的问题，终于解决了，请有需要的人参考我的问题，stackoverflow.com/questions/52907373/…

标签： jquery node.js autocomplete tags pug

【解决方案1】：

一开始尽量保持简单。让我们知道什么对您不起作用并发布您的代码（无效的示例代码），以便我们实际提供帮助。

基本示例

如果使用 twitter bootstrap 从简单的静态数据测试开始，使用这样的数据属性（不要忘记引导所需的 js 和 css）

<input type='text' data-provide='typeahead' autocomplete='off'  data-items='4'  
data-source='["one", "two", "three", "four", "five"]'/>

资源

预输入文档：http://twitter.github.io/bootstrap/javascript.html#typeahead

【讨论】：

【解决方案2】：

最近我正在使用 express、jade、bootstrap 和 tagmanager 开发一个 POC（一个简单的天气报告 web 应用程序）。我能够使 标签输入字段 工作，并且我已经在 GitHub 上共享了 POC。

翡翠模板file看起来像下面的代码sn-p。

block content
  .jumbotron
    h2 Weather report
    h3 Welcome to the weather report page!

  div.container
    .navbar.navbar-default(role='navigation')
      .container-fluid
        .collapse.navbar-collapse
          form(name="report", class="navbar-form navbar-left", action="/weather/report", method="POST")
            input(type="text", name="cities", class="form-control", data-role="tagsinput", placeholder="Type in city and press enter...")
            input(type="submit", class="btn btn-default", value="Submit")

  div.footer

城市输入字段的属性之一是data-role="tagsinput"。

输入字段如下图所示：

然后，我有一个路线（routes/weather.js），一旦用户点击提交按钮，就会被点击。

我希望这对您有所帮助。如果有人需要进一步澄清，请发表评论。

【讨论】：