автозаполнение google-place-api после ввода 3 символов - PullRequest
Новая
       35

автозаполнение google-place-api после ввода 3 символов

0 голосов
/ 10 октября 2018

Я использую React.JS, и мне нужно вызвать автозаполнение google-place-api после ввода 3 символов в поле поиска.Они имеют компенсацию в своей документации, но она не работает.Вот мой код: 

renderAutoComplete() {
    let attr = this;
    const { google, map } = this.props;
    var autocompleParam = {
        offset: 4
    }
    const aref = this.refs.autocomplete;
    const node = ReactDOM.findDOMNode(aref);
    var start_location = document.getElementById('start_location')
    var from_address = new google.maps.places.Autocomplete(
        start_location, autocompleParam, {
    });
    from_address.setComponentRestrictions({ 'country': ['uk'] });

    google.maps.event.addListener(from_address, 'place_changed', function (e) {
        document.getElementById('start_location').style.borderColor = '';
        var place = from_address.getPlace();
        attr.props.onChangeLocationSearch(place.place_id);
        attr.props.onGetLocationInfo(e);
    });

    var to_address = new google.maps.places.Autocomplete(
        (document.getElementById('end_location')), {
    });

    to_address.setComponentRestrictions({ 'country': ['uk'] });

    google.maps.event.addListener(to_address, 'place_changed', function (e) {
        var place = to_address.getPlace();
        document.getElementById('end_location').style.borderColor = '';
        attr.props.onChangeEndLocationSearch(place.place_id);
        attr.props.onReturnLocation(e);
    });
}

1 Ответ

0 голосов
/ 10 октября 2018

Вы можете попытаться получить длину значения 'to_address', а затем разрешить вызов .getPlace ().Как то так: 

var autocompleParam = {
    offset: 3
}    

google.maps.event.addListener(to_address, 'place_changed', function (e) {
    if (to_address.value.length < autocompleParam.offset) {
        return;
    }
    var place = to_address.getPlace();
    document.getElementById('end_location').style.borderColor = '';
    attr.props.onChangeEndLocationSearch(place.place_id);
    attr.props.onReturnLocation(e);
});
...