jquery - 使用 Jade 和 Bootstrap 在 Node.js 上进行标签和自动完成

Question

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

fiddle 代码是

<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'
     });
});

Answer 1

首先尽量保持简单。让我们知道什么到底不适合您并发布您的代码(不工作的示例代码)，以便我们真正可以提供帮助。

基本示例

如果使用 twitter bootstrap，请使用这样的数据属性从简单的静态数据测试开始(不要忘记 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