Typeahead merging local data and remove data

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.rawgit.com/running-coder/jquery-typeahead/develop/src/jquery.typeahead.css">
<script src="https://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="https://cdn.rawgit.com/running-coder/jquery-typeahead/develop/src/jquery.typeahead.js"></script>
<div style="width: 100%; max-width: 800px; margin: 0 auto;">

    <h1>Template Demo</h1>

    <ul>
        <li>
            <a href="http://www.runningcoder.org/jquerytypeahead/documentation/">Documentation</a>
        </li>
        <li>
            <a href="http://www.runningcoder.org/jquerytypeahead/demo/">Demos</a>
        </li>
    </ul>

    <form>
        <div class="typeahead__container">
            <div class="typeahead__field">

            <span class="typeahead__query">
                <input class="js-typeahead-input"
                       name="q"
                       type="search"
                       autofocus
                       autocomplete="off">
            </span>
            <span class="typeahead__button">
                <button type="submit">
                    <span class="typeahead__search-icon"></span>
                </button>
            </span>

            </div>
        </div>
    </form>
</div>

JavaScript

$.typeahead({
    input: ".js-typeahead-input",
    minLength: 1,
    order: "asc",
    group: true,
    maxItemPerGroup: 3,
    groupOrder: function () {
        var scope = this, sortGroup = [];
        for (var i in this.result) {
            sortGroup.push({
                group: i,
                length: this.result[i].length
            });
        }
        sortGroup.sort(scope.helper.sort(["length"], false, function (a) {
            return a.toString().toUpperCase()
        }));
        return $.map(sortGroup, function (val, i) {
            return val.group
        });
    },
    hint: true,
    template: "{{name}}, {{group}}",
    emptyTemplate: "no result for {{query}}",
    source: {
        branchName: {
            display: "name",
            data: [{
                "id": 415849,
                "name": "Bhp"
            }, {
                "id": 415859,
                "name": "Bbct"
            }],
            ajax: function (query) {
                return {
                    type: "GET",
                    url: "https://api.myjson.com/bins/189k4t",
                    data: {
                        "branchName": "{{query}}"
                    },
                    callback: {
                        done: function (data) {
                            console.log(data);
                            return data;
                        }
                    }
                }
            }
        }
    },
    onClickAfter: function (node, a, item, event) {
        event.preventDefault();
    }
    ,
    callback: {
        onResult: function (node, query, obj, objCount) {
            console.log(objCount)
            var text = "";
            if (query !== "") {
                text = objCount + ' elements matching "' + query + '"';
            }
        }
    },
    debug: true
});