This is an API which returns results in an array, for auto suggestions
For Eg. if I query "google" I get the results as follows
["google","google maps","google translate","google earth","google images","google docs","google voice","google scholar","google chrome","google calendar",]
You can try it yourself here
Here's my code that I m using to query this API but it doesnt seem to return results.
Here's the code that I m using for it
$(function() {
$( "#city" ).autocomplete({
source: function( request, response ) {
$.ajax({
url: "q.php",
dataType: "json",
data: {
"q" : request.term
},
success: function( data ) {
response(data[1]);
}
});
},
minLength: 2
});
});
I dont understand where am I going wrong in the code
Please correct me ! Because it doesnt seem to be working as I wanted
Edit: Accessing the Data from the same server
You forgot to add jquery-ui library in your fiddle. But if you do code will not work anyway, because you can't access data from another domain via ajax request. Only from same domain on what js code executes.
This might be helpful
$(document).ready(function() {
$.getJSON('http://twitter.com/users/usejquery.json?callback=?', function(json) { //get information about the user usejquery from twitter api
$('#twitter_followers').text(json.followers_count); //get the follower_count from the json object and put it in a span
});
});
Look for something called as cross-domain ajax.
http://usejquery.com/posts/the-jquery-cross-domain-ajax-guide
You can read here about using jQuery autocomlete for cross-domain environment: http://1300grams.com/2009/08/17/jquery-autocomplete-with-json-jsonp-support-and-overriding-the-default-search-parameter-q/
Also you need to add jquery.autocomplete.js to your jsFiddle environment.
Related
I am trying to submit my form data via a POST AJAX request and cannot find any solutions.
I can't just get the values by ID or name etc because it is dynamically created depending on data from a database.
I have tried using the childNodes and think this may be a solution but cannot figure it out. Do I need to use JQuery? Can it be done with just JS as I'm a beginner.
Any ideas would be appreciated, cheers.
Did you tried below
$( "form" ).submit(function( event ) {
( var jsonData = $( this ).serializeArray() );
event.preventDefault();
// --- Your Ajax request
});
What you can do is just give an id (here i am giving form_id) to the form
$('#form_id').submit(function(){
e.preventDefault();
$.ajax({
type: "POST",
url: "your_url",
data: $('#form_id').serialize(),
success: function (data) {
alert('ok');
}
});
})
Cheers. :)
I finally managed to retrieve a list from the available options related to the name searched from a field. Now, my goal is to retrieve some extra info when the user selects a specific option from the list. The JSON returns only the last name of the person and the user id which is an auto-increment field in the database. So I thought that I could send another JSON request to the server to actually return all the information available from the person specified from the user id. Is this considered bad practice ? Is there something alternative I am maybe missing ?
All in all, my code is here:
<script>
$(function() {
$( "#search" ).autocomplete({
delay: 0,
minLength: 2,
source: function(request, response) {
$.ajax({
url: 'search.php',
data: { term: request.term },
success: function(data) {
data = JSON.parse(data);
response($.map(data, function(item) {
return {
label: item.firstName,
value: item.firstName};
}));
}
});
}
})
});
</script>
So, how am I supposed to achieve this ?
I searched similar threads and read the doc in the official site but couldn't find a way to start. I think that somehow the results returned from the first call should be appended to DOM with anchor links, this code should be placed to the select property if I am not mistaken. But, I am very new to jquery and these web stuff and can't figure out the way.
Any help will be much appreciated. Thank you in advance.
It all depends on how much extra data you need returned.
If it's not much, then it makes sense to return the data as extra properties in a list of objects you are returning for the autocomplete results.
If you think you need too much extra data to make that viable, then in the autocomplete's select callback, you can just use the ID value to fetch all the additional info in an additional AJAX call to a second web service that returns the persons details for the passed in ID value.
I'm trying to use a custom source (remote) with typeahead.js, and having a bit of trouble getting things to work correctly. If I hard code the data, things work fine, but when I try to implement a call to a remote service, that call is never invoked, and thus, never retrieves the data to populate the typeahead.
Here's the code:
var places = function(query, cb){
$.getJSON({
url: "https://api.foursquare.com/v2/venues/search?v=20120321&intent=global&query=%QUERY&client_id="+App.fs.client_id+"&client_secret="+App.fs.client_secret,
success: function(results){
cb(results.response.venues);
},
error: function(){
console.log("error");
}
});
};
$("#search").typeahead({
highlight: true
},
{
name: "Places",
displayKey: "name",
source: places
}
);
If I create an object called results and manually structure the data, and pass that to cb, things work fine. However, with this implementation, $.getJSON is never even called. What am I missing?
Thanks!
As it turns out, the problem was in how I implemented $.getJSON. I'd thought the signature for that function was a hash of options, but it's not, it's actually (url, [data], [success]). Changing that to the correct signature makes things work.
Thanks for all the quick responses!
I think you can do it in this way
var search = $("#search").typeahead({
highlight: true,
source: []
};
Now you can use asyncrouniuous request to fetch data from server
$.getJSON({
url: "https://api.foursquare.com/v2/venues/search?v=20120321&intent=global&query=%QUERY&client_id="+App.fs.client_id+"&client_secret="+App.fs.client_secret,
success: function(results){
// some logic to filter, process results from server
// now you can directly update typeahead source
search.data('typeahead').source = results;
},
error: function(){
console.log("error");
}
});
Also read this and this discussion
Also i love selectize.js library, which have rich api, try it
Note that with typeahead.js you don't have to manually load your data. Using a prefetch URL will grab data on pageload and then stored in localStorage
$('#input').typeahead([
{
name: 'places',
prefetch: four_square_url_query,
}
]);
Isn't "places" in your example a function? What about:
var places;
$.getJSON({
url: fsquare_query,
success: function(results){
places = results.response.venues;
},
error: function(){
console.log("error");
}
});
I believe the most recent typeahead does not have a "source" property, rather it has "local".
Is it possible to use jQuery or javascript to get the amount of followers a user has on instagram and then display that number inside a div element? I've found several PHP answers but I can't use PHP. Any help would be GREATLY appreciated.
Instagram supports RESTfull webservices. The solution you found for PHP can also be used in jquery. You just need to make jsonp calls to the server.
Hope this helps.
Trying to access Instagram API using jQuery
Use something similar. Use the resulting JSON data to print the followers number into a div.
$(document).ready(function(e) {
$('#fetch_followers').click(function(e) {
var $url = 'https://api.instagram.com/v1/users/{user-id}/?access_token={access-token}&count=100';
var $access_token = '{access-token}';
$.ajax({
method: "GET",
url: $url,
dataType: "jsonp",
jsonp : "callback",
success: function(data) {
$('#followers').append(data.counts.followed_by);
}
});
});
});
The code is rough, untested, but something along those lines will work.
I'm using jQuery autocomplete in my web application. I followed this http://jqueryui.com/demos/autocomplete/#remote-jsonp When it sends the suggestion request it sending to the different url not the one I've given in $.ajax() url
Here is the jQuery code:
$("#add-keywords").autocomplete({
source: function( request, response ) {
var q = $("#add-keywords").val();
$.ajax({
url: "keywords_suggestions/",
dataType: "json",
data: {
query: q
}
});
},
minLength: 2,
select: function( event, ui ) {
log( ui.item ?
"Selected: " + ui.item.label :
"Nothing selected, input was " + this.value);
}
});
I'm using Django for server side scripting. It must actually want to request to this url http://127.0.0.1:8000/keywords_suggestions But it requesting to this url http://127.0.0.1:8000/information/?query=web Why is it so?
Thanks!
I was having the same problem and resolved it by loading the latest jquery and jqueryUI files.
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
Earlier i was using only the autocomplete.min.js taken up from some website. May be that was the problem
Either it doesn't like the URL, or the given one doesn't exist anyways try to put a / before the url url: "/keywords_suggestions/" maybe this will help.
Otherwhise take a look if you have a different autocomplete on the same site if it get's triggered unintentionally by your function - as you said it's going to a different url then specified -> try to find out what kind of url it is - and how it could possibly be redirected there.