4

auto-complete に基づいて jQuery プラグインtag-itにいくつかの機能を追加しようとしています:

a) JSON データをフィルタリングして、タグの名前のみを表示しようとしています。

によって返される JSON サンプル/repo/json:

[{id:1, name:"0.8-alpha-1", category:"version"}, {id:2, name:"0.8-alpha-2", category:"version"}, {id:3, name:"0.8-alpha-3", category:"version"}, {id:4, name:"0.8-alpha-4", category:"version"}, {id:5, name:"0.8-alpha-1", category:"version"}, {id:6, name:"0.8-alpha-2", category:"version"}, {id:7, name:"0.8-alpha-3", category:"version"}, {id:8, name:"0.8-alpha-4", category:"version"}]

b) ユーザーがデータを送信するときに、名前ではなくタグの ID を送信したい。

c) tag-it 入力フィールドにいくつかの制約を追加しようとしています: ユーザーは my によって返された JSON にないタグを検証できません/repo/json call。

tag-it リポジトリをフォークしたくありません。ユーザー配列と検索の交差をbeforeTagAddedオプションでテストすることは可能のようです。

交差点を実現するためのタグのリストがどこにあるかわからないため、現時点では成功していません。

私のjsコード:

 $(function(){
    $("#singleFieldTags").tagit({
      tagSource: function(search, showChoices) {
        $.ajax({
          url: "/repo/json",
          dataType:   "json",
          data: {q: search.term},
          success: function(choices) {
            showChoices(choices);
          }
        })},
           beforeTagAdded: function(event, ui) {
           //if ($.inArray(ui.tagLabel, search) == -1) {
           //   $("#singleFieldTags").tagit("removeTagByLabel", ui.tagLabel);
           // }
            console.log(ui.tag);
           }});

    });

html フォーム:

<form name="data" action="/repo/uploadMole" method="POST" enctype="multipart/form-data">
    <input name="tags" id="singleFieldTags" ><br/>
    <input type="Submit">
</form>
4

2 に答える 2

0

タグが追加されたときにタグを変更すると、削除が中断され、他のことも中断される可能性があります。beforeTagRemovedハンドラーを作成し、将来的には他のハンドラーを作成することで、それを軽減することができます。（維持するのが面倒）。

私がコメントしたように、autocomplete apiを使用する必要があります。ドキュメントはさらにjquery-uiを指しています。データは次の形式になります。

... label プロパティと value プロパティを持つオブジェクトの配列: [ { label: "Choice1", value: "value1" }, ... ]

だから私はこれで十分だと思う：

 $("#singleFieldTags").tagit({
     autocomplete: {
        source: function(search, showChoices) {
                    $.getJSON("/repo/json", {q: search.term},
                              function(data) {
                                  var choices = [];
                                  $.each(data, function(idx, tag){
                                      choices.push({label: tag.name,
                                                    value: tag.id})
                                      });
                                  showChoices(choices);
                              });
                }
         }
     })

悲しいことに、これは tag-it として期待どおりに機能せず、現在、タグを作成するときにラベルを削除し、ID のみを使用します。tag-it をクリーンアップして、完全なオートコンプリート API をサポートする必要があると思います。

アップデート

メンテナはこれに同意します。したがって、この回答は将来的に標準的な回答になる可能性があります。

于 2013-03-30T10:03:45.730 に答える