動的に作成されたタグをselect2のリストの一番下に移動します

サロイシュレスタ

select2でタグの作成オプションを使用しています。ただし、「新しいカテゴリ」オプションを最初ではなくリストの一番下に移動したいと思います。

$(document).ready(function() {
    $('.select2').select2({
        escapeMarkup: function (markup) {
        return markup;
    },
    templateResult: formatResult,
    templateSelection: formatResult,
    tags: true,
    createTag: function (params) {
        // Don't offset to create a tag if there is no @ symbol
        if (params.term.match(/[a-z]/i)) {
            // Return null to disable tag creation
            return {
                id: params.term,
                text: params.term +' <span class="new-category-text">[New Category]</span>',
                tag: true
            }
        }
        return null;
    },
    matcher: matchCustom,
    });
});

function matchCustom(params, data) {
    // If there are no search terms, return all of the data
    if ($.trim(params.term) === '') {
        return data;
    }

    // Do not display the item if there is no 'text' property
    if (typeof data.text === 'undefined') {
        return null;
    }

    // `params.term` should be the term that is used for searching
    // `data.text` is the text that is displayed for the data object
    if (data.text.toUpperCase().indexOf(params.term.toUpperCase()) > -1) {
        var modifiedData = $.extend({}, data, true);
        // modifiedData.text += ' (matched)';

        // You can return modified objects from here
        // This includes matching the `children` how you want in nested data sets
        return modifiedData;
    }

    // Return `null` if the term should not be displayed
    return null;
}

    function formatResult(state)
    {

        if (state.text === '-- Select --') {
            return '<span class="text-danger">'+state.text+'</span>';
        }
        if (!state.id || !state.element) {
            // console.log(state);
            return state.text;
        }

        if(state.element.dataset.global === '1'){
            // console.log(state);
            return '<span>'+state.text+'</span><span class="float-right">Standard</span>';
        }else{
            return '<span>'+state.text+'</span>';
        }
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>

<div>
  <select class="select2" style="width:200px;" name="cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </select>
</div>

そして、これがスクリーンショットです ここに画像の説明を入力してください

Islam Elshobokshy

sorter機能を使用しselect2、1つのライナーを追加して、アレイを再利用できます。

for (var x in results) results[x].text.includes('[New Category]') ? results.push(results.splice(x, 1)[0]) : 0;

$(document).ready(function() {
  $('.select2').select2({
    escapeMarkup: function(markup) {
      return markup;
    },
    templateResult: formatResult,
    templateSelection: formatResult,
    tags: true,
    createTag: function(params) {
      // Don't offset to create a tag if there is no @ symbol
      if (params.term.match(/[a-z]/i)) {
        // Return null to disable tag creation
        return {
          id: params.term,
          text: params.term + ' <span class="new-category-text">[New Category]</span>',
          tag: true
        }
      }
      return null;
    },
    matcher: matchCustom,
    sorter: function(results) {
      for (var x in results) results[x].text.includes('[New Category]') ? results.push(results.splice(x, 1)[0]) : 0;
      return results;
    },
  });
});

function matchCustom(params, data) {
  // If there are no search terms, return all of the data
  if ($.trim(params.term) === '') {
    return data;
  }

  // Do not display the item if there is no 'text' property
  if (typeof data.text === 'undefined') {
    return null;
  }

  // `params.term` should be the term that is used for searching
  // `data.text` is the text that is displayed for the data object
  if (data.text.toUpperCase().indexOf(params.term.toUpperCase()) > -1) {
    var modifiedData = $.extend({}, data, true);
    // modifiedData.text += ' (matched)';

    // You can return modified objects from here
    // This includes matching the `children` how you want in nested data sets
    return modifiedData;
  }

  // Return `null` if the term should not be displayed
  return null;
}

function formatResult(state) {

  if (state.text === '-- Select --') {
    return '<span class="text-danger">' + state.text + '</span>';
  }
  if (!state.id || !state.element) {
    // console.log(state);
    return state.text;
  }

  if (state.element.dataset.global === '1') {
    // console.log(state);
    return '<span>' + state.text + '</span><span class="float-right">Standard</span>';
  } else {
    return '<span>' + state.text + '</span>';
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>

<div>
  <select class="select2" style="width:200px;" name="cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </select>
</div>

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

SwiftUIはNavigationViewスタックの一番下に移動します

分類Dev

選択したアイテムを移動してリストの一番上に移動する方法

分類Dev

クリックするとアイテムを削除し、それらのアイテムをリストの一番下に移動します

分類Dev

フラグメントをスタックの一番上に移動します

分類Dev

Pythonクラッシュコース、第2版。横向きのシューティングゲーム。エイリアンは、一番上の行が一番下に当たるまで下に移動し続けます

分類Dev

私のdivをページの一番下に移動させます

分類Dev

cssで一番上の行をテキストの一番下に移動する方法

分類Dev

jQuery Sortable-ドラッグアウトした場合、アイテムをリストの一番上に移動します。

分類Dev

単一のアイテムをリストの一番上に移動します

分類Dev

EditTextがレイアウトの一番下に移動します

分類Dev

選択範囲をExcelvbaのそれぞれの列の一番下に移動します

分類Dev

appendToを使用してリストアイテムを一番下に移動します

分類Dev

ターミナルパネルを一番下のオプションに移動しましたか?(VSCode)

分類Dev

アイテムがリストの一番下に移動したことをユーザーに表示する

分類Dev

Redisはアイテムをリストの中央から一番上に移動します

分類Dev

XaxisをPlotlyのスタックチャートの一番下に移動する

分類Dev

HTMLDivは親divの一番下に移動しません

分類Dev

JScrollPaneで選択したアイテムをリストの一番上に移動し、残りのアイテムをJavaで表示します

分類Dev

JScrollPaneで選択したアイテムをリストの一番上に移動し、残りのアイテムをJavaで表示します

分類Dev

データがreactjsで動的に本文に追加されたら、ページの一番下までスクロールしますか?

分類Dev

h1をdivの一番下に移動する

分類Dev

Googleスプレッドシート-「ステータス」が値に変更されたときに行をシートの一番下に移動する方法

分類Dev

テキストエディットのスクロールバーを一番上に移動します

分類Dev

動的に生成されたdivの一番下まで自動スクロールダウン

分類Dev

スクロールバーが一番下に移動した後、ボタンを有効にするにはどうすればよいですか?

分類Dev

スクロールバーが一番下に移動した後、ボタンを有効にするにはどうすればよいですか?

分類Dev

AngularJSはng-focusを使用してリストアイテムをリストの一番上に移動します

分類Dev

MSAccess-複数選択リストボックスをクリアし、一番上の行に移動し、選択を解除します

分類Dev

XSLT 1.0:要素を親の一番下に移動して並べ替えます

Related 関連記事

  1. 1

    SwiftUIはNavigationViewスタックの一番下に移動します

  2. 2

    選択したアイテムを移動してリストの一番上に移動する方法

  3. 3

    クリックするとアイテムを削除し、それらのアイテムをリストの一番下に移動します

  4. 4

    フラグメントをスタックの一番上に移動します

  5. 5

    Pythonクラッシュコース、第2版。横向きのシューティングゲーム。エイリアンは、一番上の行が一番下に当たるまで下に移動し続けます

  6. 6

    私のdivをページの一番下に移動させます

  7. 7

    cssで一番上の行をテキストの一番下に移動する方法

  8. 8

    jQuery Sortable-ドラッグアウトした場合、アイテムをリストの一番上に移動します。

  9. 9

    単一のアイテムをリストの一番上に移動します

  10. 10

    EditTextがレイアウトの一番下に移動します

  11. 11

    選択範囲をExcelvbaのそれぞれの列の一番下に移動します

  12. 12

    appendToを使用してリストアイテムを一番下に移動します

  13. 13

    ターミナルパネルを一番下のオプションに移動しましたか?(VSCode)

  14. 14

    アイテムがリストの一番下に移動したことをユーザーに表示する

  15. 15

    Redisはアイテムをリストの中央から一番上に移動します

  16. 16

    XaxisをPlotlyのスタックチャートの一番下に移動する

  17. 17

    HTMLDivは親divの一番下に移動しません

  18. 18

    JScrollPaneで選択したアイテムをリストの一番上に移動し、残りのアイテムをJavaで表示します

  19. 19

    JScrollPaneで選択したアイテムをリストの一番上に移動し、残りのアイテムをJavaで表示します

  20. 20

    データがreactjsで動的に本文に追加されたら、ページの一番下までスクロールしますか?

  21. 21

    h1をdivの一番下に移動する

  22. 22

    Googleスプレッドシート-「ステータス」が値に変更されたときに行をシートの一番下に移動する方法

  23. 23

    テキストエディットのスクロールバーを一番上に移動します

  24. 24

    動的に生成されたdivの一番下まで自動スクロールダウン

  25. 25

    スクロールバーが一番下に移動した後、ボタンを有効にするにはどうすればよいですか?

  26. 26

    スクロールバーが一番下に移動した後、ボタンを有効にするにはどうすればよいですか?

  27. 27

    AngularJSはng-focusを使用してリストアイテムをリストの一番上に移動します

  28. 28

    MSAccess-複数選択リストボックスをクリアし、一番上の行に移動し、選択を解除します

  29. 29

    XSLT 1.0:要素を親の一番下に移動して並べ替えます

ホットタグ

アーカイブ