Typeahead merging local data and remove data

by Tom Bertrand

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>Link 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

var myData = [
    {name: "abc", link: "http://abc.com"}, 
    {name: "bbc", link: "http://bbc.com"},
    {name: "cbc", link: "http://cbc.com"},
    {name: "dbc", link: "http://dbc.com"},
    {name: "ebc", link: "http://ebc.com"}
];

$.typeahead({
    input: ".js-typeahead-input",
    minLength: 1,
    maxItem: 10,
    cancelButton: true,
    emptyTemplate: 'No result for "{{query}}"',
    source: {
        myGroup: {
            display: "name",
            href: "{{link}}",
            data: myData
        }
    },
    callback: {
        onSubmit: function (node, form, item, event) {
            event.preventDefault();

            if (this.result.length === 1) {
                window.location.href = this.result[0].link;
                return false;
            }
        }
    }
})