web-dev-qa-db-ja.com

Googleプレイスオートコンプリートにバインドされた入力をクリアするにはどうすればよいですか？

これが私の問題です。ユーザーから場所に関する情報を収集するためにGoogleプレイスオートコンプリートを使用しています。

イベント「place_changed」で、この情報を保存します。ただし、ユーザーに複数の場所を追加できるようにしたいと考えています。この場所が保存された後、入力をクリアしたいと思います。

ただし、Googleオートコンプリートは、入力フィールドの最後のエントリを自動的に置き換えます。とにかくそれを取り除くには？

詳細：

var inputDiv = $('#myinput');
var options = {
  types: ['(cities)']
};
var autocomplete = new google.maps.places.Autocomplete(inputDiv[0], options);

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

    console.log(inputDiv.val()); // 'Paris, France'
    inputDiv.val('');
    console.log(inputDiv.val()); // (an empty string)

    setTimeout(function() {
        console.log(inputDiv.val()); // 'Paris, France' (It's back!)
        inputDiv.val('');
        console.log(inputDiv.val()); // (an empty string)      
    }, 1);

    setTimeout(function() {
        console.log(inputDiv.val()); // (an empty string)      
    }, 10);
}

あなたは私に言うでしょう、まあそれはうまく見えます、タイムアウトでそれをクリアしてください。しかし、入力から離れてクリックすると（フォーカスが失われます）。最後のエントリーが再び戻ってきました！

それを修正するアイデアはありますか？ Googleのドキュメントで次のような関数が見つかりません

autocomplete.clear();

ありがとう！

javascriptjquerygoogle-maps-api-3google-places-api
20
Tristan

オートコンプリートは内部で入力のblurイベントをリッスンしているようです。そのため、リッスンする何かを与えて、その後フィールドをクリアします。

inputId_div.blur();    
setTimeout(function(){
 inputId_div.val('')
 inputId_div.focus();},10);
18
Dr.Molle

前の用語は、オートコンプリートオブジェクトに存続します。

解決策：入力ボックスをクリアしてから、新しいオートコンプリートオブジェクトを作成します。また、以前のイベントリスナーを必ず削除してください。

宣言：

var input = document.getElementById('autocomplete');
var autocomplete;
var autocompleteListener;
var onPlaceChange = function() {...};

var initAutocomplete = function() {
  autocomplete = new google.maps.places.Autocomplete(input);
  autocompleteListener = google.maps.event.addListener(autocomplete, 'place_changed', onPlaceChange);
};

クリアするには：

input.value = "";
google.maps.event.removeListener(autocompleteListener);
initAutocomplete();

以前のオートコンプリートオブジェクトはガベージコレクションされます。私が間違っていたら訂正してください。メモリリークを確実に露呈させるために、手動で削除できます。

7
Shu

あなたが使用できる場所をクリアするには：

autocomplete.set('place',null);

place_changeイベントもトリガーします。

6
grogro

この問題がまだ発生しているかどうかはわかりませんが、自分に役立つ修正を見つけました

google.maps.event.addListener(autoComplete, 'place_changed', function() {   
   $this.one("blur",function(){
      $this.val("");
   });

   //[DO YOUR CODE HERE]

   setTimeout(function(){
      $this.val(""); 
   },10); 
});

$ thisは、オートコンプリートフィールドへのjQ参照です。値を入力してオートコンプリートリストにタブで移動してEnterキーを押すと、ぼかしイベントがトリガーされます。マウスでどこかをクリックすると、ぼかしイベントがトリガーされ、フィールドがクリアされます。

入力後に直接マウスを使用して結果を選択した場合、ブラーはトリガーされません。次に、タイムアウトによりフィールドから値が削除されます。

入力後にフィールドをクリアするのは馬鹿げたハックのようですが、私は4時間かけてネットを検索し、googleのapiを調べましたが、より良い解決策を見つけることができませんでした。

2
Mattijs

より良いインターネットのために...

ぼかしをトリガーし、Googleプレイスを呼び出してビジネスを行います。次に、ロジックを実行します。

inputId_div.trigger('blur');

Googleの価値の点滅が問題である場合は、可能であれば次のアクションを連鎖させてみてください。

0
Dave Jellison

Dr.Molleの優れた答えのわずかな拡張として、少なくとも最近のブラウザでは、z-indexプロパティを使用してフラッシュを回避できます。

var input = $('#[id of autocomplete field]');
$(input).blur();
setTimeout(function() {
    var container = $('.pac-container');
    var zIndex = $(container).css('z-index');
    $(container).css('z-index', -1);
    input.val('')
    input.focus();
    setTimeout(function() {
        $(container).css('z-index', zIndex);
    }, 200);
}, 10);
0
user404345