Changing data source of Typeahead.js
- or -
Post a project like this2398
€150(approx. $159)
- Posted:
- Proposals: 6
- Remote
- #1694701
- Awarded
Description
Experience Level: Intermediate
General information for the website: Mapping website
Description of requirements/features: 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: [
'',
'No Matches Found',
' 0) {
switch (suggestion.Flag) {
case 1:
**change url and parameters**
case 2:
**change url and parameters**
case 3:
case 4:
case 5:
case 6:
}
}
});
Extra notes:
Description of requirements/features: 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: [
'',
'No Matches Found',
' 0) {
switch (suggestion.Flag) {
case 1:
**change url and parameters**
case 2:
**change url and parameters**
case 3:
case 4:
case 5:
case 6:
}
}
});
Extra notes:
Hassan N.
100% (5)Projects Completed
5
Freelancers worked with
5
Projects awarded
37%
Last project
1 Jul 2020
Ireland
New Proposal
Login to your account and send a proposal now to get this project.
Log inClarification Board Ask a Question
-
There are no clarification messages.
We collect cookies to enable the proper functioning and security of our website, and to enhance your experience. By clicking on 'Accept All Cookies', you consent to the use of these cookies. You can change your 'Cookies Settings' at any time. For more information, please read ourCookie Policy
Cookie Settings
Accept All Cookies