Hi I am trying to autocomplete a list of cities, but the json object returned is not formatted for use in autocomplete that requires a field called "label":"cityname" to display the autocomplete, so i am trying to reformat the json object using an ajax call and writting it to a global variable, the issue is that once the ajax call returns, my jsData is [] an empty array... What am I doing wrong? and why doesn't the global variable keep a value?
http://www.andymatthews.net/read/2012/03/27/jQuery-Mobile-Autocomplete-now-available
<script>
$("#nec").bind("pageshow", function(e) {
var jsData = [];
$.ajax({
url: "http://localhost:8084/REST/resources/cities",
data:{},
type: 'GET',
crossDomain: true,
dataType: 'jsonp',
jsonp: 'jsonp',
jsonpCallback: 'jsoncallback',
error: function(error){
console.log(error);
},
success: function(result) {
for (i = 0; i < result.length; i++){
jsData.push({label:result[i].name, value:result[i]});
}
console.log(JSON.stringify(jsData));
},
});
$("#textinput").autocomplete({
target: $('#suggestions'),
source: jsData,
minLength: 1
});
});
</script>
I am a little fresh on the JS front, so there are a few things that I still have not got a hang of
You have to put
$("#textinput").autocomplete({
target: $('#suggestions'),
source: jsData,
minLength: 1
});
within your success()
function.
Because, jsData
becomes update within success()
. Execution of pageshow
event's anonymous function is faster than execution of success()
. So, within that function jsData
remain empty.
You can retrieve data through autocomplete itself. See here
The problem is that jsData
isn't global, but scoped inside the anonymous function.
var jsData = []; // make that here.
$("#nec").bind("pageshow", function(e) {
$.ajax({
url: "http://localhost:8084/REST/resources/cities",
data:{},
type: 'GET',
crossDomain: true,
dataType: 'jsonp',
jsonp: 'jsonp',
jsonpCallback: 'jsoncallback',
error: function(error){
console.log(error);
},
success: function(result) {
for (i = 0; i < result.length; i++){
jsData.push({label:result[i].name, value:result[i]});
}
console.log(JSON.stringify(jsData));
},
});
$("#textinput").autocomplete({
target: $('#suggestions'),
source: jsData,
minLength: 1
});
Although, i wouldn't advise a global variable. But, if it works for you, it's your wish.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.