Results from autocomplete + jsonp

Hey guys,

Im using jquery autocomplete from jqueryui to try retrieve results from a simple search.

The problems is when i type e.g "Deser" the results from this is about 100 rows containing other words that there arent in the term typed.

Im new on using jquery so, i really don´t know what ´s going on.

Hre is my code used:

$("#city").autocomplete({

source: function (request, response) {

$.ajax({

url: "http://api.giantbomb.com/games/?api_key=MYKEY&format=jsonp&json_callback=myCallback",

dataType: "jsonp",

jsonpCallback: 'myCallback',

data: {

featureClass: "P",

style: "full",

maxRows: 12,

name_startsWith: request.term

},

success: function (data) {

response($.map(data.results, function (item) {

return {

label: item.name,

value: item.name

}

}));

}

});

@LordAndrew: Ok, so the results im getting it is the same when i query on a browser the url http://api.giantbomb.com/games/?api_key=myapi_key&format=xml .

Doesn´t matter what i type on a search field, the result is always the same.

In that case i wasn't worried about the pagination, so my goals was get the right results based on the term typed and then try to get some improvements on that....

@LordAndrew:Actually I just checked the the rquest.term value and it´s was populated with the term used for search. isn´t empty ;(

@cyberox: Let me say first Im not a master just a hobbyist. Ok so I think the problem might be, what you are using to check the result of the api request. Doing /games/ returns the first 100 game in the database. That is why you get the same results. If you look a the dates in the xml they are in order, by date added to the database I assume. Since the api limits you to 100 results at a time you would have to loop through the db compare the name entered to the result name to find the match. Alternatively you could try:

api.giantbomb.com/search/?query= NAME OF GAME & format=xml & api_key=YOUR KEY

maybe that will work better, I don't know if it will give results without you sending the request. So maybe you could try make your code send a request with every couple of letters that the user writes in to your text box until they get the result they want.

Again not a master this is probably not very efficient, but it seem logical enough. Hope it helps

@BD: Hello! All you said make sense! The problem using the url "api.giantbomb.com/search/?query= NAME OF GAME & format=xml & api_key=YOUR KEY" is because the variable "query" is dynamic and the format=xml doens´t work with jsonp, so i dont know what kind of changes should i do on my code to make it work using the script im currently using.

You really helped me to have a better understanding what the problem is, but i still didn´t get how to fix it.

Really appreciate that!

Well this seems to work http://api.giantbomb.com/search/?query=Mario & field_list=name & format=jsonp & json_callback=my_callback & api_key= YOUR KEY.

I used mario as an example change that with text from your form. I also limited the results to only show the name (field_list = name) you take that out and it still works.

@BD: oK, i tried here but now its seem crashed the code, dont show the results anymore.

<script>

$(function () {

function log(message) {

$("<div/>").text(message).prependTo("#log");

$("#log").scrollTop(0);

}

$("#city").autocomplete({

source: function (request, response) {

$.ajax({

url: "'http://api.giantbomb.com/search/?query='" + request.term + "'&api_key=mykey&format=jsonp&json_callback=myCallback&field_list=name'",

dataType: "jsonp",

jsonpCallback: 'myCallback',

data: {

maxRows: 12,

name_startsWith: request.term

},

success: function myCallback (data) {

debugger;

response($.map(data.results, function (item) {

return {

label: item.name,

value: item.name

}

}));

}

});

},

minLength: 2,

select: function (event, ui) {

log(ui.item ?

"Selected: " + ui.item.label :

"Nothing selected, input was " + this.value);

},

// open: function () {

// $(this).removeClass("ui-corner-all").addClass("ui-corner-top");

// },

// close: function () {

// $(this).removeClass("ui-corner-top").addClass("ui-corner-all");

// }

});

});

</script>

Ok, i did it work now, like u said i changed exactly to that url "http://api.giantbomb.com/search/?query=Mario & field_list=name & format=jsonp & json_callback=my_callback & api_key= YOUR KEY"

But the ploblem i was having is continuing, when i type someting like "crazy" or "blabla" retrieve the results based on query=Mario =/

@cyberox: I think '" + request.term + "' is putting the word in quotes. Try to pass the string so it shows up without quotes.

Ok, finally!!!!!

It really works now !!

See the code:

$("#city").autocomplete({

source: function (request, response) {

$.ajax({

url: "http://api.giantbomb.com/search/?query=" + request.term + "&api_key=mykey&format=jsonp&json_callback=myCallback&field_list=name",

dataType: "jsonp",

jsonpCallback: 'myCallback',

data: {

maxRows: 12,

name_startsWith: request.term

},

success: function myCallback (data) {

response($.map(data.results, function (item) {

return {

label: item.name,

value: item.name

}

}));

}

});

},

Thank you ver much for the help! : @DB and @LordAndrew

@cyberox: Cool glad I could help