0

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

2 Answers 2

2

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

2
  • ill give that a try, I actually tried to do the reverse, add the ajax call to source: of the autocomplete as a callback, and that did not work. Is there a simpler solution to get a json object and format it? it's a huge amount of code to do such a simple task.
    – Astronaut
    May 19, 2012 at 16:57
  • @thecodeparadox Unfortunately it's not the same auto-complete. This auto-complete is for jquery mobile, as a last resort I may use jquery ui but I did not want to add jQ UI to the project just for auto-complete.
    – Astronaut
    May 19, 2012 at 17:54
0

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.

2
  • I tried that too, that copy paste is actually my 10th attempt to make it work. that results in jsDAta being [] the same.
    – Astronaut
    May 19, 2012 at 15:19
  • hum I actually tried that again and this time it worked, so it seems to have an inconsistent behavior... hum...
    – Astronaut
    May 19, 2012 at 16:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.