通过JSON和JQUERY自动完成将PHP数组发送到Javascript数组

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.

我有完整功能的jquery自动完成代码。我试图将返回数组的一些元素传递给javascript数组,然后从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:

我在下面的评论中修改了SCX建议的代码(非常感谢SCX),但我们还没有完成。这是修改后的代码:

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:

所以我试着像这样修改SCX的两行代码:

  $('#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:

所以,假设例如从自动完成下拉菜单中我选择4503,KALLANGUR,相关的'geo-search-lat'和'geo-search-lng'数组元素将是:

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

ui [2] ['geo-search-lat']和ui [2] ['geo-search-lng'],对吗?

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

这是我删除ui [0]并用ui []替换它的思路 - 但这不起作用。

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

我需要一些方法将记录号'x'发送到ui ['x']。

TIA.

2 个解决方案

#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:

如果您想知道代码无法正常工作的原因请看一下:

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

我终于设法获得了正确的语法并使我的代码工作。我不得不将JSON中返回的名称更改为“geo-search-lat”和“geo-search-lng”更改为“纬度”和“经度”。由于连字符,jQuery ui.item.geo-search-lat和ui.item.geo-search-lng似乎失败了。

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

以下是从标签获取jquery数组对象值的工作代码:

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

花了一些时间,但我终于到了那里!感谢你的帮助。

#1