Sending PHP array to Javascript Array via JSON and JQUERY autocomplete

Question

I have fully functioning jquery autocomplete code. I am trying to pass some of the elements of the returned array to a javascript array and in turn fill out a value from DIV ID.

I modified the code as advised by SCX in the comments below (Thanks so much SCX) but we are not quite there yet. Here is the modified code:

jQuery(document).ready(function(){
    $('#edit-ad-location').autocomplete({
                source:'/postcodes-latlong.php',
                minLength:2,
                response: function( event, ui ) {
                   //ui have response from you call
                   //console.log(ui);
                   //assign your values like this
                   $('#geo-search-lat').val( ui[0]['geo-search-lat'] );
                   $('#geo-search-lng').val( ui[0]['geo-search-lng'] );
                }
    });
});

This returns the following error:

Uncaught TypeError: Cannot read property 'geo-search-lat' of undefined

I should have mentioned that the array can contain many record entries and not just one.

{"0":
      {"id":"384047",
       "label":"4503, DAKABIN",
       "value":"4503, DAKABIN",
       "geo-search-lat":"-27.226474",
       "geo-search-lng":"152.980732"},
   "1":
       {"id":"384062",
        "label":"4503, GRIFFIN",
        "value":"4503, GRIFFIN",
        "geo-search-lat":"-27.272654", 
        "geo-search-lng":"153.025911"},
    "2":
        {"id":"384077",
         "label":"4503, KALLANGUR",
         "value":"4503, KALLANGUR",
         "geo-search-lat":"-27.25075",
         "geo-search-lng":"152.992606"},
     "3":
       {"id":"384092",
        "label":"4503, KURWONGBAH",
        "value":"4503, KURWONGBAH",
        "geo-search-lat":"-27.225828",
        "geo-search-lng":"152.947552"},
   "4":{
        "id":"384107",
        "label":"4503, MURRUMBA DOWNS",
        "value":"4503, MURRUMBA DOWNS", 
        "geo-search-lat":"-27.258672",
        "geo-search-lng":"153.006916"},
    "5":{
        "id":"384122",
        "label":"4503, WHITESIDE",
        "value":"4503, WHITESIDE",
        "geo-search-lat":"-27.255364",
        "geo-search-lng":"152.929729"
        }
 }

So I tried modifying SCX's two beautiful lines of code like this:

  $('#geo-search-lat').val( ui[]['geo-search-lat'] );
  $('#geo-search-lng').val( ui[]['geo-search-lng'] );

and also like this:

  $('#geo-search-lat').val( ui['geo-search-lat'] );
  $('#geo-search-lng').val( ui['geo-search-lng'] );

But neither of these work.

So let's say if for instance from the autocomplete pull down menu I select 4503, KALLANGUR,, the associated 'geo-search-lat' and 'geo-search-lng' array elements would be:

ui[2]['geo-search-lat'] and ui[2]['geo-search-lng'] , correct?

This is my train of thought behind removing the ui[0] and replacing it with ui[] - but this doesn't work.

I need some way to send the record number 'x' to the ui['x'].

TIA.

Answer 1

You have to use it inside your autocomplete call, I think response event will be best for that.

$('#edit-ad-location').autocomplete({
                    source:'/postcodes-latlong.php', 
                    minLength:2,
                    response: function( event, ui ) {
                       //ui have response from you call
                       //console.log(ui);
                       //assign your values like this
                       $('#geo-search-lat').val( ui[0]['geo-search-lat'] );
                       $('#geo-search-lng').val( ui[0]['geo-search-lng'] );
                    }  
 });

If you want to know why your code is not working take a look at this :

Answer 2

I finally managed to get the correct syntax and make my code work. I had to change the name returned from the JSON for 'geo-search-lat' and 'geo-search-lng' to 'latitude' and 'longitude'. It appears that the jQuery ui.item.geo-search-lat and ui.item.geo-search-lng were failing because of the hyphens.

Here is the working code to obtain a jquery array object's value from the label:

     <script>

    jQuery(document).ready(function(){
        $('#edit-ad-location').autocomplete({
                    source:'/postcodes-latlong.php',
                    select: function(event, ui) {
                        $('#geo-search-lat').val( ui.item.latitude );
                        $('#geo-search-lng').val( ui.item.longitude );
                    }
        });
});
    </script>

This autocomplete call returns the correct values in the <div id="geo-search-lat"> and <div id="geo-search-lng"> , as well as auto-populating the <div id="edit-ad-location> menu with data from the database.

It took some time but I finally got there! Thanks all for your help.