如何使用 jquery .val() 从自动完成输入中获取值？答案

【问题标题】：How to get value from autocomplete input with jquery .val()?如何使用 jquery .val() 从自动完成输入中获取值？
【发布时间】：2016-06-08 16:36:22
【问题描述】：

我无法使用 jquery .val() 获得自动完成输入，因为 .val() 只返回我自己输入的输入值，而不是自动完成添加的输入值。

jquery .val() 仅在对其他字段进行更改时返回完整值。

我使用谷歌地图自动完成地址，然后将该地址传递给谷歌地图 api 以获取两个地址之间的距离。问题是这个“start = $('#id_rent_delivery_address').val()”只获取手动输入但没有自动完成的地址部分。

也许你有什么想法我可以解决它吗？

我的代码：

<script>

    $(document).ready(function() {
        initAutocomplete();
    });

    var autocomplete, autocomplete2;

    function initAutocomplete() {
        // Create the autocomplete object, restricting the search to geographical
        // location types.
        autocomplete = new google.maps.places.Autocomplete(
                /** @type {!HTMLInputElement} */(document.getElementById('id_rent_withdraw_address')),
                {types: ['geocode']});


        autocomplete2 = new google.maps.places.Autocomplete(
                /** @type {!HTMLInputElement} */(document.getElementById('id_rent_delivery_address')),
                {types: ['geocode']});

        // When the user selects an address from the dropdown, populate the address
        // fields in the form.

    }

</script>





<script type="text/javascript">

$(document).on('change', '#rent-confirm-form', function() {

    var start = $('#id_rent_delivery_address').val();
    var end = $('#id_rent_withdraw_address').val();

    GetRoute(start, end);

});   

    function GetRoute(start, end) {
        //*********DISTANCE AND DURATION**********************//
        var service = new google.maps.DistanceMatrixService();
        service.getDistanceMatrix({
            origins: [start],
            destinations: [end],
            travelMode: google.maps.TravelMode.DRIVING,
            unitSystem: google.maps.UnitSystem.METRIC,
            avoidHighways: false,
            avoidTolls: false
        }, function (response, status) {
            if (status == google.maps.DistanceMatrixStatus.OK && response.rows[0].elements[0].status != "ZERO_RESULTS") {
                var distance = response.rows[0].elements[0].distance.text;
                var duration = response.rows[0].elements[0].duration.text;

                console.log(distance);
                console.log(duration);
                console.log(start);
                console.log(end);

            } else {
                console.log("Unable to find the distance via road.");
            }
        });
    }

</script>

【问题讨论】：

标签： javascript jquery autocomplete

【解决方案1】：

自己解决。只是用jquery触发方法模拟了表单的变化。

$( "#anyInput" ).trigger("change");

【讨论】：