#1 Posted by cyberox (10 posts) -

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

}

}));

}

});

#2 Posted by LordAndrew (14419 posts) -
I'm not too familiar with jQuery either, but I'll see what I can do. Could you give an example of what results you are getting? How is request.term being populated? And how are you dealing with the pagination of API results?
#3 Edited by cyberox (10 posts) -

@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....

#4 Posted by LordAndrew (14419 posts) -
@cyberox: That appears to be every game from the first page of results. Can you check the value of request.term? It seems that it may be empty for whatever reason.
#5 Posted by cyberox (10 posts) -

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

#6 Posted by BD (251 posts) -

@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

#7 Posted by cyberox (10 posts) -

@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!

#8 Posted by BD (251 posts) -

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.

#9 Posted by LordAndrew (14419 posts) -
The search resource only gives results for words that are perfect matches, so "Mar" wouldn't get you Mario for instance. Every word you enter will need to be complete before relevant results appear. If that's acceptable, then you should certainly use the search resource. The alternative would be querying every page of results, which apparently would take 100 requests!
#10 Edited by cyberox (10 posts) -

@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>

#11 Posted by cyberox (10 posts) -

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 =/

#12 Posted by BD (251 posts) -

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

#13 Posted by cyberox (10 posts) -

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

#14 Posted by BD (251 posts) -

@cyberox: Cool glad I could help