web-dev-qa-db-ja.com

Googleのplace_changedイベントを発生させてEnterキーにオートコンプリートを配置する方法

クリックするとイベントが発生してCookieが設定されるように見えますが、Enterキーを押して送信してもCookieは設定されず、ページはCookieなしでリダイレクトされます。

function locationAuto() {
        $('.search-location').focus(function () {
        autocomplete = new google.maps.places.Autocomplete(this);
        searchbox = this;

        google.maps.event.addListener(autocomplete, 'place_changed', function () {
            var thisplace = autocomplete.getPlace();
            if (thisplace.geometry.location != null) {
                $.cookie.raw = true;
                $.cookie('location', searchbox.value, { expires: 1 });
                $.cookie('geo', thisplace.geometry.location, { expires: 1 });
            }
        });
});

.search-locationは、複数のテキストボックスのクラスです。 Cookieから値を取得してリダイレクトする送信ボタンがあります（サーバー側）

autocompletegoogle-places
34
John Stephenson

ジョナサン・コールフィールドの答えから改編：

$('.search-location').keypress(function(e) {
  if (e.which == 13) {
    google.maps.event.trigger(autocomplete, 'place_changed');
    return false;
  }
});
40
Marcelo

私もこの問題に遭遇し、良い解決策を思いつきました。私のウェブサイトでは、送信前にautocomplete.getPlace（）。formatted_addressを非表示の入力に保存したかったのです。これは、フォームの送信ボタンをクリックすると期待どおりに機能しましたが、オートコンプリートのドロップダウンメニューの選択でEnterキーを押すと機能しませんでした。私の解決策は次のとおりでした：

$(document).ready(function() {

    // Empty the value on page load
    $("#formattedAddress").val("");
    // variable to indicate whether or not enter has been pressed on the input
    var enterPressedInForm = false;

    var input = document.getElementById("inputName");
    var options = {
      componentRestrictions: {country: 'uk'}
    };
    autocomplete = new google.maps.places.Autocomplete(input, options);

    $("#formName").submit(function(e) {
        // Only submit the form if information has been stored in our hidden input
        return $("#formattedAddress").val().length > 0;
    });

    $("#inputName").bind("keypress", function(e) {
        if(e.keyCode == 13) {
            // Note that simply triggering the 'place_changed' event in here would not suffice, as this would just create an object with the name as typed in the input field, and no other information, as that has still not been retrieved at this point.

            // We change this variable to indicate that enter has been pressed in our input field
            enterPressedInForm = true;
        }
    });

    // This event seems to fire twice when pressing enter on a search result. The first time getPlace() is undefined, and the next time it has the data. This is why the following logic has been added.
    google.maps.event.addListener(autocomplete, 'place_changed', function () {
        // If getPlace() is not undefined (so if it exists), store the formatted_address (or whatever data is relevant to you) in the hidden input.
        if(autocomplete.getPlace() !== undefined) {
            $("#formattedAddress").val(autocomplete.getPlace().formatted_address);
        }
        // If enter has been pressed, submit the form.
        if(enterPressedInForm) {
            $("#formName").submit();
        }
    });
});

この解決策はうまくいくようです。

5
Liran H

上記の応答は両方とも、ユーザーが「Enter」を押したときに質問を発するという一般的な質問に対する適切な回答です。ただし、Googleプレイスオートコンプリートを使用すると、OPの問題の一部である可能性のある、より具体的な問題が発生しました。 place_changedイベントが有用なことを行うには、ユーザーがオートコンプリートオプションのいずれかを選択する必要があります。 'place_changed'をトリガーするだけの場合、if（）ブロックはスキップされ、Cookieは設定されません。

ここの質問の2番目の部分には非常に良い答えがあります： https://stackoverflow.com/a/11703018/1314762

注：同じページに複数のオートコンプリート入力がある場合に遭遇する理由のために、選ばれた答えではなく、amirnissimの答えが使用されます。

5
Don McCurdy

おそらく最もユーザーフレンドリーなソリューションではありませんが、JQueryを使用してEnterキーを無効にすることができます。

このようなもの...

$('.search-location').keypress(function(e) {
  if (e.which == 13) {
    return false;
  }
});
1
Jonny C