Clear autocomplete field value after select address

I am trying to build an app based on Google Maps and I have create an autocomplete field that allowing the end user to enter his address manualy.

Also, my app, requires the start address of a trip to located within predefined by the admin boundaries.

What I like to do, is when the end user try to enter the start trip address, and the address it is outside the boundaries, to clear the autocomplete field.

Unfortunatelly I cannot clear the field. While the console show me the value of the field empty, the browser still contains the last entered address.

The code I am using is the following:

//  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());
        }
    }
);

Finally, here is my screen shot on my App and on my Console:

Application Screenshot

Element inspection

Console Messages

Can somebody to help me with this issue ?