1

我正在尝试在stackoverflow上实现像here这样的标记功能，但是到目前为止我无法克服jade、jquery的组合......我正在使用引导程序，所以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'
     });
});
4

2 回答 2

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/typeahead.js/examples/

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

于 2013-07-18T08:45:32.953 回答
0

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

玉模板文件看起来像下面的代码片段。

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），一旦用户单击提交按钮，就会被击中。

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

于 2015-01-07T14:53:39.190 回答