reintialization of datasets in typeahead.js
HTML
<script src="//cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.9.3/typeahead.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.0/js/bootstrap.min.js"></script>
<div class='well'>
<input id='typeahead_demo' placeholder='Type name ...' value='' />
<button id='add_name' class='btn btn-primary'>Add</button>
</div>
<h3>Selected Names : <h3>
<div id='name_list' class='well'></div>
CSS
.typeahead,
.tt-query,
.tt-hint {
width: 250px;
height: 40px;
padding: 8px 12px;
font-size: 20px;
line-height: 30px;
border: 2px solid #ccc;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
outline: none;
}
.typeahead {
background-color: #fff;
}
.typeahead:focus {
border: 2px solid #0097cf;
}
.tt-query {
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.tt-hint {
color: #999
}
.tt-dropdown-menu {
width: 422px;
margin-top: 12px;
padding: 8px 0;
background-color: #fff;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, 0.2);
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
-moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
box-shadow: 0 5px 10px rgba(0,0,0,.2);
}
.tt-suggestion {
padding: 3px 20px;
font-size: 18px;
line-height: 24px;
}
.tt-suggestion.tt-is-under-cursor {
color: #fff;
background-color: #0097cf;
}
.tt-suggestion p {
margin: 0;
}
.name_css {
text-align: center;
border-width: 2px;
width: 250px;
background-color: lightgreen;
margin-bottom: 5px;
}
#add_name {
margin-top: 15px;
}
}
JavaScript
var dataSets = [
'amit', 'aakash', 'ram', 'rahul', 'rakesh', 'sohail', 'salman'
];
function enable_auto_complete(name, dataSets){
$('#typeahead_demo').typeahead({
name: name,
local: dataSets
});
}
//first time
enable_auto_complete('Names', dataSets);
$('#add_name').click(function(){
var value = $('#typeahead_demo').val();
if(dataSets.indexOf(value) !== -1){
$('#name_list').append('<div class="name_css">'+value+'</div>');
$('#typeahead_demo').val('');
dataSets.splice(dataSets.indexOf(value), 1);
$('#typeahead_demo').typeahead('destroy');
enable_auto_complete('Names after ' + value, dataSets);
}
});