通過JSON和JQUERY自動完成功能將PHP數組發送到Javascript數組

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-search-lat”和“ geo-search-lng”數組元素將為：

ui[2]['geo-search-lat']和ui[2]['geo-search-lng'] ，對嗎？

這是刪除ui [0]並用ui []替換后的思路-但這不起作用。

我需要某種方式將記錄號“ x”發送到ui ['x']。

TIA。

Answer 1

您必須在自動完成通話中使用它，我認為響應事件將是最好的選擇。

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

如果您想知道為什么代碼不起作用，請查看以下內容 ：

Answer 2

我終於設法獲得正確的語法並使我的代碼正常工作。 我必須將JSON返回的名稱“ geo-search-lat”和“ geo-search-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>菜單，其中包含來自數據庫的數據。

花了一些時間，但我終於到了！ 感謝你的幫助。