1

私はstackoverflowでここのようなタグ付け機能を実装しようとしていますが、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 ブートストラップを使用する場合は、このようなデータ属性を使用して単純な静的データ テストから始めます (ブートストラップに必要な 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/

typeahead ドキュメント: http://twitter.github.io/bootstrap/javascript.html#typeahead

于 2013-07-18T08:45:32.953 に答える
0

最近、express、jade、bootstrap、および tagmanager を使用して、 POC (単純な天気予報 Web アプリケーション) に取り組んでいました。タグ入力フィールドを機能させることができ、GitHub で POC を共有しました。

jade テンプレートファイルは、以下のコード スニペットのようになります。

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

都市入力フィールドの属性の 1 つがですdata-role="tagsinput"。

入力フィールドは以下の画像のようになります。 ここに画像の説明を入力

次に、ユーザーが送信ボタンをクリックするとヒットするルート(routes/weather.js)があります。

これがお役に立てば幸いです。さらに明確にする必要がある場合は、コメントしてください。

于 2015-01-07T14:53:39.190 に答える