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>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"}
];
$(".js-typeahead-input").typeahead({
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;
}
}
}
})