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: "nbc", link: "http://nbc.com"}];
$.typeahead({
input: ".js-typeahead-input",
minLength: 0,
source: {
myGroup: {
display: "name",
href: "{{link}}",
data: myData
}
},
template: function (query, item) {
var template = '{{display}}';
if (item.addNewItem) {
template = 'New Item';
}
return template;
},
callback: {
onResult: function (node, query, result, resultCount, resultCountPerGroup) {
result.push({
addNewItem: true,
group: 'groupName'
});
},
onClick: function (node, a, item, event) {
if (item.addNewItem) {
event.preventDefault();
alert('Create new item!')
}
// console.log(item)
}
},
debug: true
});