5

Select2 のタグが適用された入力 (テキストエリア) があります。そのため、ユーザーがデータベースに存在するアイテムの名前を入力すると、一致するアイテムのリストが表示され、ユーザーはそのアイテムを選択してタグを作成できます。

これまでの基本的なタグ機能のコードは次のとおりです。

$('#usualSuppliers').select2({
        placeholder: "Usual suppliers...",
        minimumInputLength: 1,
        multiple: true,
        id: function(e) {
            return e.id + ":" + e.name;
        },
        ajax: {
            url: ROOT + 'Ajax',
            dataType: 'json',
            type: 'POST',
            data: function(term, page) {

                return {
                    call: 'Record->supplierHelper',
                    q: term,
                    page_limit: 10
                };
            },
            results: function(data, page) {
                return {
                    results: data.suppliers
                };
            }
        },
        formatResult: formatResult,
        formatSelection: formatSelection,
        initSelection: function(element, callback) {
            var data = [];
            $(element.val().split(",")).each(function(i) {
                var item = this.split(':');
                data.push({
                    id: item[0],
                    title: item[1]
                });
            });
            //$(element).val('');
            callback(data);
        }
    });

入力したテキストが存在しない場合に新しいタグを作成する方法はありますか? 最初はスペースで区切ることで何とかできると思っていたのですが、一部の項目（業者名）にスペースが入っているのでうまくいきません。

一致するものが見つからない場合、ユーザーはドロップダウンボックスに表示されるボタンを押してタグを「作成」する必要があると思いますが、これを行う方法がわかりません。

ユーザーがスペースを含む可能性のある新しいタグを作成できるようにするにはどうすればよいですか?

4

1 に答える 1

8

はい、できます。ドキュメントに例があります。http://ivaynberg.github.io/select2/#eventsを見てください。

$("#e11_2").select2({
  createSearchChoice: function(term, data) { 

   if ($(data).filter( function() { return this.text.localeCompare(term)===0;   
         }).length===0) {
     return {id:term, text:term};
   } 

  },
  multiple: true,
  data: [{id: 0, text: 'story'},{id: 1, text: 'bug'},{id: 2, text: 'task'}]
});

'id' と 'text' を持つオブジェクトを返す createSearchChoice のような関数を作成する必要があります。それ以外の場合、未定義を返すと、オプション not が作成されます。

于 2013-11-11T10:27:32.423 に答える