javascript - Bootstrap Autocomplete のトークンフィールドが機能しない

Question

タグ入力フィールドを作成しようとしています。Bootstrap の Tokenfield でjquery UI Autocomplete を使用しています。しかし、オートコンプリートは起動しません。以下のコードを見てください。

Javascript

$(function () {
    $("#TagsInput").tokenfield({
        autocomplete: {
            source: function (request, response) {
                $.getJSON("/SearchTags/", {
                    term: extractLast(request.term)
                }, response);
            },
            search: function () {
                var term = extractLast(this.value);
                if (term.length < 1) {
                    return false;
                }
            },
            focus: function () {
                return false;
            },
            select: function (event, ui) {
                var terms = split(this.value);
                terms.pop();
                terms.push(ui.item.value);
                terms.push("");
                this.value = terms.join(",");
                return false;
            }
        }
    });

HTML

<input type="text" value="love,you" id="TagsInput" class="form-control" />

Tokenfield のドキュメントによると、次のコードは正常に動作します。

    $('#TagsInput').tokenfield({
  autocomplete: {
    source: ['red','blue','green','yellow','violet','brown','purple','black','white'],
    delay: 100
  },
  showAutocompleteOnFocus: true
})

/SearchTags/URLからこのようなJson配列を返しています

[{"id":1,"value":"Love"},{"id":2,"value":"Hate"}]

これを理解するのを手伝ってください、私はJavaスクリプトが苦手です。本当にありがとう