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>Disabled data 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"
                       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

let source = {
    country: {
        data: [{
            name: "Canada",
            population: 36600000,
            // Manually set disabled: true within your data
						disabled: true,
        }, {
            name: "United-States",
            population: 301300000
        }, {
            name: "India",
            population: 1200000000
        }]
    }
};

$.typeahead({
    input: '.js-typeahead',
    minLength: 0,
    hint: true,
    blurOnTab: false,
    searchOnFocus: true,
    display: ['name'],
    // Or use a matcher function to disable data "on the fly"
    matcher: function (item, displayKey) {
      // Disable Canada & United-States for xyz reason
      if (item.name === "Canada") {
        item.disabled = true;
        return item;
      }
      return true;
    },
    source
});