Tokenfield for Bootstrap Autocomplete Not Working

Question

I am trying to make tags input field, and I am using jquery UI Autocomplete with Tokenfield for Bootstrap. But autocomplete doesn't fire. Please look on code below.

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" />

According to Tokenfield documentation the following codes works fine.

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

I am returning Json array like this from /SearchTags/ URL

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

Please help me figure this out, I am not good with java-script. Thanks so much