jquery - 选择地址后清除自动完成字段值

Question

我正在尝试构建一个基于 Google map 的应用程序，并且我创建了一个自动完成字段，允许最终用户手动输入他的地址。

此外，我的应用程序要求行程的起始地址位于管理边界预定义的范围内。

我喜欢做的是，当最终用户尝试输入起始行程地址且该地址超出边界时，清除自动完成字段。

不幸的是我无法清除该字段。虽然控制台显示该字段的值为空，但浏览器仍然包含最后输入的地址。

我使用的代码如下:

//  Build a new AutoComplete object
autocomplete            =   new google.maps.places.Autocomplete(
    $addressField[0],    //  Set the address field
    {
        types   :   [
            'geocode'
        ],
        bounds  :   map.getBounds()
    }
);

//  Add an event listener for autocomplete object
google.maps.event.addListener(
    autocomplete,
    'place_changed',                //  And track the change event
    function()
    {
        var place           =   autocomplete.getPlace();
        var latLng          =   new google.maps.LatLng(place.geometry.location.lat(),   place.geometry.location.lng());
        var isWithinPolygon =   areaPolygon.containsLatLng(latLng);

        if(!isWithinPolygon)
        {
            // NOTE : I have also try the .val() method but with no effect.
            $addressField.attr('value', '').attr('data-lat',  '').attr('data-lng', '');
            console.warn('This address it is not located within the area boundaries');
        }
        else
        {
            $addressField.attr('data-lat',  place.geometry.location.lat()).attr('data-lng', place.geometry.location.lng());
        }
    }
);

最后，这是我的应用程序和控制台上的屏幕截图:

应用程序屏幕截图

元素检查

控制台消息

有人可以帮我解决这个问题吗？

Answer 1

另外清除自动完成的 place 属性:

 autocomplete.set('place',void(0));