Bootstrap 3 typeahead.js - remote url attributes
Solution 1
remote
is exclusively for typeahead.js (not part of Bootstrap). But you are not using the remote
correctly, it can be either a string or an object, not a function.
When you need to change the request URL, you can use replace
:
$('#league').typeahead({
remote: {
url: '/typeahead/get_league?query=%QUERY',
replace: function () {
var q = '/typeahead/get_league?query=%QUERY';
if ($('#sport').val()) {
q += "&sport=" + encodeURIComponent($('#sport').val());
}
return base_url + q;
}
},
limit: 10
});
Check the docs here
Hope it helps.
Solution 2
Hieu Nguyen solution will not work for %QUERY wildcards. According to Bloodhound.js documentation,
replace – .... If set, no wildcard substitution will be performed on url.
So %QUERY will be passed as string without being replaced by text entered from user.
So you should put typeahead value into your url :
$('#league').typeahead({
remote: {
url: '/typeahead/get_league?query=%QUERY',
replace: function () {
var q = '/typeahead/get_league?query=' + $('#league').val();
if ($('#sport').val()) {
q += "&sport=" + encodeURIComponent($('#sport').val());
}
return base_url + q;
}
},
limit: 10
});
Solution 3
Here is a complete example with the QUERY result as well passed. Note that when the remote method is used variable substitution no longer functions. Thanks to hieu-nguyen for the majority of it!
jQuery('#city').typeahead({
name: "cities",
remote: {
url: current_web_root + '?action=ajax|getcities&query=%QUERY',
replace: function () {
var q = current_web_root + '?action=ajax|getcities&query=' + jQuery('#city').val();
if (jQuery('#state').val()) {
q += "&state=" + encodeURIComponent(jQuery('#state').val());
}
return q;
}
},
cache: false
});
jQuery("#state").change(function (e) {
jQuery('#city').val("");
});
koxon
Updated on July 09, 2022Comments
-
koxon almost 2 years
I'm trying to call my remote url with added attributes to the url.
For now I have this working:
$('#league').typeahead({ remote: '/typeahead/get_league?query=%QUERY', limit: 10 });
Now I would like to do something like this:
$('#league').typeahead({ remote: function () { var q = '/typeahead/get_league?query=%QUERY'; if ($('#sport').val()) q += "&sport=" + encodeURIComponent($('#sport').val()); return base_url + q; }, limit: 10 });
I would like to add the GET attribute 'sport' to the URL so I can narrow down my query on the backend. I tried the code above but I get a JS error.
The previous version of Bootstrap Typeahead allowed this type of setup. It was very useful as I could update the remote URL every time a key get hit.
Any idea how to make that work for this version ?
-
koxon over 10 yearsI am using typeahead.js. My problem comes from the fact that I can't use a function. Because I need to set my URL at the init, the #sport is not yet containing any value. That is why I would like to set it every time I hit a key and not ahead of time ... I was able to do that using bootstrap 2.0 typeahead, now with typeahead.js I can't ... that's a big drawback. Any idea how I can work around that ?
-
fredtantini over 9 yearsThis does not provide an answer to the question. To critique or request clarification from an author, leave a comment below their post - you can always comment on your own posts, and once you have sufficient reputation you will be able to comment on any post.
-
aKiRa over 9 years@fredtantini: I cannot add comment, so I have had to make a post. Surely you can close response on a "formalism" bases, but please next time take your time to understand the post and eventually report it's content as comment, because sometimes consideration from new users like me can save a lot of time to those who read the response marked as accepted.