Javascript 谷歌放置自动完成强制选择

我使用的是JavaScript Google places自动完成API v3。它工作得很好，但我想知道是否有一种方法可以强制从自动完成中进行选择，即不接受任何自由格式文本的输入。我看了看医生，没有看到这样的选择，但我想我会要求只是为了安全。我相信我可以找到一种使用JavaScript的方法，但是如果可以的话，我更愿意使用已经构建好的方法。谢谢

Google Places API目前不支持此功能。如果您认为这是一个有用的功能，请提交一个。

我也遇到了同样的问题，下面是我提出的一个解决方法。这可以与onchange或onkeyup等事件结合使用。希望有帮助

//参数：

address-包含要验证的位置的字符串

address\u success\u div-专门用于显示验证的div对象

function is_location_valid(address, address_success_div)
{
    var geocoder = new google.maps.Geocoder();

    geocoder.geocode( {"address": address}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK)
        {
            address_success_div.innerHTML = "SUCCESS";
        }
        else
        {
            address_success_div.innerHTML = "FAILURE";
        }
    });
}

---

实际上，我们所做的如下：
-每次从自动完成列表中选择位置时，我们都会用JSON响应中的一些字段（城市名称、国家名称、经度和纬度）填充一些隐藏字段
-提交表单时，我们检查这些字段是否有值，如果没有，这意味着用户没有从列表中选择位置，而是自己输入了一个值

它不是以JS的方式解决问题，但它仍然可以很好地解决问题

 <script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=places"
    type="text/javascript"></script>
<script>
    var IsplaceChange = false;
    $(document).ready(function () {            
        var input = document.getElementById('txtlocation');
        var autocomplete = new google.maps.places.Autocomplete(input, { types: ['(cities)'] });

        google.maps.event.addListener(autocomplete, 'place_changed', function () {
            var place = autocomplete.getPlace();

            IsplaceChange = true;
        });

        $("#txtlocation").keydown(function () {
            IsplaceChange = false;
        });

        $("#btnsubmit").click(function () {

            if (IsplaceChange == false) {
                $("#txtlocation").val('');
                alert("please Enter valid location");
            }
            else {
                alert($("#txtlocation").val());
            }

        });
    });
</script>

var IsplaceChange=false；
$（文档）.ready（函数（）{
var input=document.getElementById（'txtlocation'）；
var autocomplete=new google.maps.places.autocomplete（输入，{types:['（cities）]}）；
google.maps.event.addListener（自动完成，'place\u changed'，函数（）{
var place=autocomplete.getPlace（）；
IsplaceChange=true；
});
$（“#txtlocation”）.keydown（函数（）{
IsplaceChange=false；
});
$（“#btnsupmit”）。单击（函数（）{
如果（IsplaceChange==false）{
$（“#txtlocation”）.val（“”）；
警报（“请输入有效位置”）；
}
否则{
警报（$（“#txtlocation”）.val（）；
}
});
});

Hia 我通过每次用户聚焦输入字段时创建autocomplete对象，并在每次模糊时检查其值来做到这一点：

var autocompleteField;
var input = document.getElementById('YOUR_INPUT');

$('#YOUR_INPUT').focus(function(e){

    if(autocompleteField){
        autocompleteField=null;
    }
    autocompleteField = new google.maps.places.Autocomplete(input);

});

$('#YOUR_INPUT').blur(function(e){

    var results = autocompleteField.getPlace();
    if(!results){
        $(this).attr('value','');
    }
});

---

我从这里结合了几个不同答案的建议解决了这个问题。用户输入地址的My Textfield称为txtPlaces。这是我的密码：

var pac_input = document.getElementById('txtPlaces');

(function pacSelectFirst(input) {
    // store the original event binding function
    var _addEventListener = (input.addEventListener) ? input.addEventListener : input.attachEvent;

    function addEventListenerWrapper(type, listener) {
        // Simulate a 'down arrow' keypress on hitting 'return' when no pac suggestion is selected,
        // and then trigger the original listener.
        if (type == "keydown") {
            var orig_listener = listener;
            listener = function(event) {
                var suggestion_selected = $(".pac-item-selected").length > 0;
                if ((event.which == 13 || event.which == 9) && !suggestion_selected) {
                    var simulated_downarrow = $.Event("keydown", {
                        keyCode: 40,
                        which: 40
                    });
                    orig_listener.apply(input, [simulated_downarrow]);
                }

                orig_listener.apply(input, [event]);
            };
        }



        _addEventListener.apply(input, [type, listener]);
    }

    input.addEventListener = addEventListenerWrapper;
    input.attachEvent = addEventListenerWrapper;

    var autocomplete = new google.maps.places.Autocomplete(input);

})(pac_input);

$('#txtPlaces').blur(function(e){
    selectFirstAddress(pac_input);
});


////Ensuring that only Google Maps adresses are inputted
function selectFirstAddress (input) {
    google.maps.event.trigger(input, 'keydown', {keyCode:40});
    google.maps.event.trigger(input, 'keydown', {keyCode:13});
}

---

这将正确地响应输入或制表键，以及当用户选择另一个字段时。希望这有帮助

WTF，各位？！？！？谷歌通常没有正确的信息。不要使用他们的自动完成API进行强制选择！这就是为什么很多网站不允许我使用他们的服务：我住在一个谷歌把地址搞乱的地方。我并不孤单

---

如果必须的话，可以使用USPS地址验证——至少它们是最新的。理想情况下，允许自动完成，但允许手动覆盖；别再懒惰了，别让我们这么多人的生活变得艰难

下面的解决方案（使用jQuery）帮了我的忙。想法是在输入失去焦点时，使用

blur（）

事件强制最后选择的地址

我们添加了一个超时，以防止

blur

和

place\u changed

事件之间发生冲突

考虑以下html：

<input type="text" placeholder="Your address" id="autocomplete">

我希望这有帮助

    var options = {
        language: 'en',
        types: ['(cities)'],
    };

    var input = document.getElementById('city');
    var autocomplete = new google.maps.places.Autocomplete(input, options);
    input.addEventListener("change", function(){
        input.value = "";
    });

输入更改时退出该值对我有效。它强制使用谷歌的位置

我用找到的代码解决了我的问题

var isPlaceChanged=false；
google.maps.event.addDomListener（窗口'load'，函数（）{
var places=new google.maps.places.Autocomplete（document.getElementById（“”））；
google.maps.event.addListener（places，'place_changed'，函数（）{
isPlaceChanged=true；
var geocoder=new google.maps.geocoder（）；
var place=places.getPlace（）；
var address=place.formatted\u地址；
geocoder.geocode（{'address'：address}，函数（结果，状态）{
if（status==google.maps.GeocoderStatus.OK）{
var latitude=results[0]。geometry.location.lat（）；
var longitude=results[0]。geometry.location.lng（）；
var-mapOptions={center:new google.maps.LatLng（纬度、经度），zoom:15，mapTypeId:google.maps.mapTypeId.ROADMAP}；
var map=new google.maps.map（document.getElementById（“dvMap”）、mapOptions）；
var marker=new google.maps.marker（{位置：new google.maps.LatLng（纬度、经度），map:map}）；
}否则{
警报（“请求失败”）
}
});
});
});
$（函数（）{
$（“#TextBox1”）.keydown（函数（）{
isPlaceChanged=false；
});
$（“#btnsupmit”）。单击（函数（）{
如果（！isPlaceChanged）{
$（“#TextBox1”）.val（“”）；
警报（“请输入有效位置”）；
}
否则{
警报（$（“#TextBox1”）.val（））；
}
});
});

您可以使用输入模式标记，强制用户选择基于Google Autocomplete API的预定义模式

输入：

    <form>
         <input type="text" onkeyup="changePatterns()" onchange="changePatterns()" id="autocomplete" required pattern="">
         <input type="submit">
    </form>

JS文件：

function changePatterns() {
    let input = document.getElementById('autocomplete').value;
    let regExp = new RegExp(' ', 'g');
    input = input.replace(regExp, '%20');

    let mapsURL = 'https://maps.googleapis.com/maps/api/place/autocomplete/json'
    mapsURL += '?types=geocode';
    mapsURL += '&key=YOUR-KEY-HERE';
    mapsURL += `&input=${input}`;
    const endpoint = 'middle.php';

    let formData = new FormData();
    formData.append('url', mapsURL);

    fetch(endpoint, {
        method: 'post',
        body: formData
        })
        .then(blob => blob.json())
        .then(response => {
            const predictions = response.predictions;
            let {length} = predictions;
            let pattern = '';
            for(let i = 0; i < length; i++){
                pattern += i == 0 ? '' : '|';
                pattern += predictions[i].description
            }
            const input = document.getElementById('autocomplete');
            input.setAttribute('pattern', pattern);
        });
}

functionchangepatterns（）{
让输入=document.getElementById（'autocomplete'）。值；
设regExp=newregexp（“”，'g'）；
input=input.replace（regExp，'%20'）；
让mapsURL为您服务https://maps.googleapis.com/maps/api/place/autocomplete/json'
mapsURL+='？类型=地理编码'；
mapsURL+='&key=您的-
    <form>
         <input type="text" onkeyup="changePatterns()" onchange="changePatterns()" id="autocomplete" required pattern="">
         <input type="submit">
    </form>

function changePatterns() {
    let input = document.getElementById('autocomplete').value;
    let regExp = new RegExp(' ', 'g');
    input = input.replace(regExp, '%20');

    let mapsURL = 'https://maps.googleapis.com/maps/api/place/autocomplete/json'
    mapsURL += '?types=geocode';
    mapsURL += '&key=YOUR-KEY-HERE';
    mapsURL += `&input=${input}`;
    const endpoint = 'middle.php';

    let formData = new FormData();
    formData.append('url', mapsURL);

    fetch(endpoint, {
        method: 'post',
        body: formData
        })
        .then(blob => blob.json())
        .then(response => {
            const predictions = response.predictions;
            let {length} = predictions;
            let pattern = '';
            for(let i = 0; i < length; i++){
                pattern += i == 0 ? '' : '|';
                pattern += predictions[i].description
            }
            const input = document.getElementById('autocomplete');
            input.setAttribute('pattern', pattern);
        });
}

<?php
header('Content-Type: application/json');
$url = $_POST['url'];
$ch = curl_init();
curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false); //remove on upload
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_VERBOSE, 1);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_AUTOREFERER, false);
curl_setopt($ch, CURLOPT_REFERER, "https://www.notmydomain.com");
curl_setopt($ch, CURLOPT_HTTP_VERSION, CURL_HTTP_VERSION_1_1);
curl_setopt($ch, CURLOPT_HEADER, 0);
$result = curl_exec($ch);
echo curl_error($ch);
curl_close($ch);
echo $result;

/*----------------------------------------------------*/
/*  check if it's valid address
/*----------------------------------------------------*/
function checkAddress(location, validLocation) {
if (location.val() == validLocation.val()) {
    return true;
}
return false;
}

/*----------------------------------------------------*/
/*  initialize auto complete address
/*----------------------------------------------------*/
function initialize() {
 let input = document.getElementById('autocomplete-input');
 let inputHidden = document.getElementById('autocomplete-input-hidden');
 let options = {
    types: ['(regions)'],
    componentRestrictions: {country: "tn"}
 };
 let autocomplete =new google.maps.places.Autocomplete(input, options);
 autocomplete.setFields(['formatted_address']);
 autocomplete.addListener('place_changed', function () {
    inputHidden.value= autocomplete.getPlace().formatted_address;
 });
}

 let location = $('#autocomplete-input');
 let validLocation = $('#autocomplete-input-hidden');
 checkAddress(location,validLocation);

 <input id="autocomplete-input" type="text">
 <input id="autocomplete-input-hidden" type="hidden" >

function invalidate(element_id){
    $('#' + element_id).addClass('err');

}

function makeValid(element_id){
    if ($('#' + element_id).hasClass('err')){
        $('#' + element_id).removeClass('err');
    }
    $('#' + element_id).valid(); //this is a method from jquery validation plugin to check validity of a field
}

document.getElementById("element_id").setAttribute('onkeydown', "invalidate('element_id')");

makeValid(userElementId);

jQuery.validator.addMethod("hasClassErr", function(value, element)  {
    return this.optional( element ) || !element.classList.contains("err");
}, jQuery.validator.format("Please choose an option from the dropdown menu."));

FORM_RULES = {
    element_name: {required: true, 'hasClassErr': true}
};


$('#form_id').validate({
    rules: FORM_RULES
});