14

優れたTag-Itを試してみました！jquery のプラグイン ( http://aehlke.github.com/tag-it/ ) ですが、思い通りに動作させることができません。

次のようなオブジェクト リストがあります。

var food = [{value:1,label:'Pizza'},{value:2,label:'Burger'},{value:3,label:'Salad'}];

セットアップで tagSource オプションに渡すもの:

$("#my_food_tags").tagit({
    tagSource: food,
    singleField: true,
    singleFieldNode: $("#my_food"),
    placeholderText: "Start typing a food name"
});

これは正常に機能しますが、オートコンプリート リスト項目をクリックすると、食品名ではなくタグに数値が表示されます。

したがって、非表示フィールドに「値」を入力し、「ラベル」をタグ名として表示することは可能ですか?

ここに私が意味するもののスクリーンショットがあります。値はタグラベルに表示され、ラベルはエーテルに失われています;-)

ラベル テキストが失われる例

誰かここで私を助けてくれませんか? それは非常に高く評価されます!

前もってありがとう、セブ

4

7 に答える 7

6

それをいじってみました。http://jsfiddle.net/pDrzx/46/を参照してください。

私がしたこと：

createTag 関数を labelname で拡張します

 createTag: function(labelname, value, additionalClass)

そして、ラベル作成変数でそれを呼び出しました

var label = $(this.options.onTagClicked ? '<a class="tagit-label"></a>' : '<span class="tagit-label"></span>').text(labelname);

次に、非表示の入力フィールドに数値があることを確認しました（保存目的のため）

  if (this.options.singleField) {
        var tags = this.assignedTags();
        tags.push(value);
        this._updateSingleTagsField(tags);
    } else {
        var escapedValue = value;
        tag.append('<input type="hidden" style="display:none;" value="' + escapedValue + '" name="' + this.options.itemName + '[' + this.options.fieldName + '][]" />');
    }

そして最後に、ラベル名をオートコンプリートとフォーカスに追加しました

        // Autocomplete.
        if (this.options.availableTags || this.options.tagSource) {
            this._tagInput.autocomplete({
                source: this.options.tagSource,
                select: function(event, ui) {
                    // Delete the last tag if we autocomplete something despite the input being empty
                    // This happens because the input's blur event causes the tag to be created when
                    // the user clicks an autocomplete item.
                    // The only artifact of this is that while the user holds down the mouse button
                    // on the selected autocomplete item, a tag is shown with the pre-autocompleted text,
                    // and is changed to the autocompleted text upon mouseup.
                    if (that._tagInput.val() === '') {
                        that.removeTag(that._lastTag(), false);
                    }
                    that.createTag(ui.item.label,ui.item.value);
                    // Preventing the tag input to be updated with the chosen value.
                    return false;
                },
            focus: function(event, ui) {
                event.preventDefault();
                that.createTag(ui.item.label,ui.item.value);
            }
            });

不足しているものはありますが、すべての createTag メソッドでラベル名を渡すようにする必要がありますが、それほど難しくはありません:)

焦点を当てて更新（@Edwinに触発）

于 2012-04-05T22:40:39.280 に答える
4

最も簡単なのは、これを実際にサポートするプラグインを入手することです。それが Select2 または Chosen です。

于 2013-11-28T13:01:51.310 に答える
2

彼が //Autocomplete でコメントした tag-it.js ファイル内に、以下のようにイベント オプション フォーカスを追加します。これで修正されるはずです。

 // Autocomplete.
        if (this.options.availableTags || this.options.tagSource || this.options.autocomplete.source) {
            var autocompleteOptions = {
                select: function(event, ui) {
                    that.createTag(ui.item.value);
                    // Preventing the tag input to be updated with the chosen value.
                    return false;
                },
                focus: function(event, ui) {
                    event.preventDefault();
                    that.tagInput.val(ui.item.label);
                }

            };
于 2012-12-12T19:58:56.050 に答える
2

この問題を解決する最も簡単な方法は、tag-it Javascript ソースの次の行を変更することです。

that.createTag(ui.item.value);

に

that.createTag(ui.item.label);

これは、エディターの 216 行目から始まるコードのオートコンプリート セクションの一部です。

// Autocomplete.
            if (this.options.availableTags || this.options.tagSource) {
                this._tagInput.autocomplete({
                    source: this.options.tagSource,
                    select: function(event, ui) {
                       // Lots of comments here
                        if (that._tagInput.val() === '') {
                            that.removeTag(that._lastTag(), false);
                        }
                        that.createTag(ui.item.value);
                        value.
                        return false;
                    }
                });
            }
于 2012-04-13T07:50:21.257 に答える
0

こんにちは、PHP を使用したプロジェクトでこれを行いました。

ある時点でプラグインを変更したので、jsfiddle スクリプト セクションのスクリプトを使用します。

ここを見て、完全に機能するキーと値のペアのスクリプトhttps://jsfiddle.net/656pnLsd/を作成しました 

<ul id="tag_list">
      <li data-value="2">test2</li>
<ul>
<script>
var tag_sources = [{value:1,label:'test1'},{value:2,label:'test2'}];
            console.log(tag_sources);
            jQuery(document).ready(function() {
              var eventTags = $('#tag_list');
                   eventTags.tagit({
                    availableTags: tag_sources,
                    fieldName: "bento4_tags",
                    singleField: true,

                }); 
            });
</script>

焦点を当てて更新 (@Edwin と Marco Johannesen に触発)

于 2016-02-27T12:54:22.960 に答える