We need to change the source of the Typeahead from the select event. For example, when a user enters a query and a list of suggestions are shown, then on selecting one of the items we need to change the url of the source and get a different set of data based on the user's selection.
for example: if we have the following, pleased look at the case statements 1 & 2 where we would want to get different data based on user selection. Please note: Once we change the daya source and present user with the new options, on selection of an item from the new list we need to go back and set the data source back to the original one.
The use caase is say the typeahead is initialised with datasource that shows Countrues. The user select a country - We go to datastore and get the towns for that country the user selected and set the source to the town that were returned and show the dropdown menu to the user.
If the user either selects a town from the dropdown OR starts retyping in the typeahead input - we need to reset the typeahead source back to the Country dataset.
$('#typeahead').typeahead({
hint: true,
highlight: true,
minLength: 1
},
{
name: 'addresses',
display: 'Value',
source: function (query, process, asyncProcess) {
var cont = $('#Country').val().toLowerCase();
$.get('/api/AddressLookup?cont=' + 'IE' + "&prefix=" + query, function (data) {
asyncProcess(data);
});
},
limit: 10,
templates: {
empty: [
'<div style="padding:5px; color:#ac0000; font-weight:bold" class="empty-message">',
'No Matches Found',
'</div>'
].join('\n'),
}
})
.on('typeahead:select', function (ev, suggestion) {
if (suggestion.Flag> 0) {
switch (suggestion.Flag) {
case 1:
**change url and parameters**
case 2:
**change url and parameters**
case 3:
case 4:
case 5:
case 6:
}
}
});
Can this be done?
Many thanks