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，相关的＆＃39; geo-search-lat＆＃39;和＆＃39; geo-search-lng＆＃39;数组元素将是：

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

这是我在删除ui [0]并将其替换为ui []背后的思路 - 但这并不起作用。

我需要一些方法来发送记录号码＆＃39; x＆＃39;到了ui [＆＃39; x＆＃39;]。

TIA。

Answer 1

您必须在自动填充调用中使用它，我认为response事件最适合您。

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

Answer 2

我终于设法获得了正确的语法并使我的代码工作。我不得不更改从JSON返回的名称，用于＆＃39; geo-search-lat＆＃39;和＆＃39; geo-search-lng＆＃39;到纬度＆＃39;和经度＆＃39;。由于连字符，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>菜单。

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

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

2 个答案: