0

複数のフィールドを持つオブジェクトを使用している場合、Bootstrap tokenfield に問題があります。たとえば、次のように定義されている json オブジェクトを使用しても問題は発生しません。

local: [ { value: 'red' }, { value: 'orange' }} ]

このためのイニシャライザは次のとおりです。

$('#tokenfield-input').tokenfield({
    typeahead: [null, { source: engine.ttAdapter(),
    displayKey: 'value',
    displayValue: 'value'
    }]
});

これは正しく動作します。ただし、別のフィールドを追加するとCannot read property 'toString' of undefined、トークンが選択されたときにエラーがスローされます。json は次のように定義されます。

local: [ { id: 1, value: 'red' }, { id: 2, value: 'orange' }} ]

このためのイニシャライザは次のとおりです。

$('#tokenfield-input').tokenfield({
    typeahead: [null, { source: engine.ttAdapter(),
    displayKey: 'value',
    displayValue: 'id'
    }]
});

ここのフィドルには実際の例が含まれています。これを行う正しい方法は何ですか？

4

1 に答える 1

0

機能しない理由は、ローカルに渡されるデータの形式が正しくないためです。Typeahead/bloodhound は、値と提案のフィールドを持つオブジェクトの配列を受け入れます。ここで、値は検索対象のフィールドで、提案は元のオブジェクトです。jQuery map 関数を使用すると、初期配列を変換できます (下の local の下に表示)。

提案を正しく読み込むには、提案テンプレートをオーバーライドする必要があります。

var one =  [
   { id: 1, name: 'red' },
   { id: 2, name: 'orange' },
   { id: 3, name: 'yellow' },
   { id: 4, name: 'green' },
   { id: 5, name: 'blue' },
   { id: 6, name: 'indigo' },
   { id: 7, name: 'violet' },
   { id: 8, name: 'black' },
   { id: 9, name: 'white' },
   { id: 10, name: 'brown' },
   { id: 11, name: 'pink' }
   ];

   $(document).ready(function () {
            var engine = new Bloodhound({
            local: $.map(one, function(d) {
               return {value: d.name, suggestion: d}
               }),
                datumTokenizer: function (d) {
                    return Bloodhound.tokenizers.whitespace(d.value);
                },
                queryTokenizer: Bloodhound.tokenizers.whitespace
            });

            engine.initialize();

            // Action item 1
            $('#mytokenfield').tokenfield({
                typeahead: [null, {
                    source: engine.ttAdapter(),
                    displayKey: 'value',
                    templates: {
                       suggestion: function (data) {
                          return $("<div />", {
                          "html": "<br />" + "<span>" +
                          data.suggestion.ID + " " + data.suggestion.Name + "</span><br />"
                          })
                       }
                   }
                }]
            });
于 2017-06-21T17:36:47.880 に答える