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

Question

我有完整的jquery自动代码。我试图将返回数组的一些元素传递给javascript数组，然后从DIV ID中填写一个值。

我按照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'] );
                }
    });
});

这将返回以下错误：

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

我应该指出，数组可以包含许多记录条目，而不仅仅是一个记录项。

{"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"
        }
 }

因此，我尝试修改SCX的两行漂亮代码，如下所示：

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

也是这样的：

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

但这两种方法都不管用。

例如，如果从自动完成下拉菜单中选择4503，KALLANGUR，相关的‘geo lat’和‘geo lng’数组元素将是：

ui[2]['geo-search-lat']和ui[2]['geo-search-lng']，对吗？

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

我需要一些方法来发送记录号码'x‘到ui'x’。

蒂娅。

Answer 1

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

下面是从标签中获取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>

此自动完成调用返回<div id="geo-search-lat">和<div id="geo-search-lng">中的正确值，以及使用数据库中的数据自动填充<div id="edit-ad-location>菜单。

花了些时间，但我终于到了那里！谢谢大家的帮助。

Answer 2

您必须使用它在您的自动完成调用，我认为响应事件将是最好的。

$('#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'] );
                    }  
 });

如果您想知道为什么您的代码不能工作，请看一看这