javascript - selectize.js 远程填充其他输入

Question

我有一个选定的输入#location，用户在其中输入他的位置，并显示 google geocoding api 中的下拉选项。 .

效果很好，但现在我想要的是当用户选择一个建议位置时填充另一个输入#latitude。

我可以使用此代码部分完成此操作:

$('#location').selectize({
        valueField: 'formatted_address',
        labelField: 'formatted_address',
        searchField: 'formatted_address',
        maxItems: 1,
        delimiter: ';',
        create: false,
        load: function (query, callback) {
            if (!query.length) return callback();
            $.ajax({
                url: "googleloc",
                type: 'GET',
                dataType: 'json',
                data: {
                    search: query,
                },
                error: function () {
                    callback();
                },
                success: function (res) {
                    callback(res.results);
                }
            });
        }

    });

    $('#location').on('change', function () {
        var test = $('#location').selectize()[0].selectize.getValue();
        $('#latitude').val(test);
    });

我的问题是，这段代码使用 'formatted_address' 填充 #latitude 输入，但没有填充纬度，正如您在下面的 json 中看到的那样加载选项返回的内容位于几何>位置>纬度下。

返回的 json 示例如下:

{
   "results" : [
      {
         "address_components" : [
            {
               "long_name" : "French Polynesia",
               "short_name" : "PF",
               "types" : [ "country", "political" ]
            }
         ],
         "formatted_address" : "French Polynesia",
         "geometry" : {
            "bounds" : {
               "northeast" : {
                  "lat" : -7.8955619,
                  "lng" : -138.6091323
               },
               "southwest" : {
                  "lat" : -23.9062409,
                  "lng" : -153.9919066
               }
            },
            "location" : {
               "lat" : -17.679742,
               "lng" : -149.406843
            },
            "location_type" : "APPROXIMATE",
            "viewport" : {
               "northeast" : {
                  "lat" : -17.4943169,
                  "lng" : -149.1247993
               },
               "southwest" : {
                  "lat" : -17.8803223,
                  "lng" : -149.6211207
               }
            }
         },
         "place_id" : "ChIJTddtfNB1GHQREVfDCXp6wJs",
         "types" : [ "country", "political" ]
      }
   ],
   "status" : "OK"
}

编辑:a jsfiddle使用 github api，我无法使用 google map api 创建一个，因为您需要一个我不想共享的 key :)

Answer 1

感谢@Comte评论，我成功完成了它，这是解决方案

$('#location').selectize({
        valueField: 'formatted_address',
        labelField: 'formatted_address',
        searchField: 'formatted_address',
        maxItems: 1,
        delimiter: ';',
        create: false,
        load: function (query, callback) {
            if (!query.length) return callback();
            $.ajax({
                url: "googleloc",
                type: 'GET',
                dataType: 'json',
                data: {
                    search: query,
                },
                error: function () {
                    callback();
                },
                success: function (res) {
                    callback(res.results);
                    googresults = res.results;
                }
            });
        },
        onChange: function (value) {
            if (!value.length) return;
            for (var key in googresults) {
                if (googresults[key].formatted_address == value) {
                    var lat = googresults[key].geometry.location.lat;
                    var lng = googresults[key].geometry.location.lng;
                }

            }
            $('#latitude').val(lat);
            $('#longitude').val(lng);
        }

    });