Google maps Places API V3 オートコンプリート - 入力時に最初の選択肢を選ぶ
2023-11-15 13:48:25
質問
Google Maps Places V3 のオートコンプリート機能を、以下のように入力ボックスに実装することに成功しました。 http://web.archive.org/web/20120225114154/http://code.google.com:80/intl/sk-SK/apis/maps/documentation/javascript/places.html . うまく動作していますが、ユーザーがEnterキーを押したときに、候補の中から最初の選択肢を選択するようにするにはどうしたらよいかを知りたいと思います。私はいくつかのJSマジックが必要だと思いますが、私はJSに非常に慣れていないので、どこから始めればよいのかわかりません。
事前にありがとうございます!
どのように解決するのですか?
最近担当したサイトでオートコンプリートを実装する際に、同じ問題が発生しました。 これは、私が考え出した解決策です。
$("input").focusin(function () {
$(document).keypress(function (e) {
if (e.which == 13) {
var firstResult = $(".pac-container .pac-item:first").text();
var geocoder = new google.maps.Geocoder();
geocoder.geocode({"address":firstResult }, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var lat = results[0].geometry.location.lat(),
lng = results[0].geometry.location.lng(),
placeName = results[0].address_components[0].long_name,
latlng = new google.maps.LatLng(lat, lng);
$(".pac-container .pac-item:first").addClass("pac-selected");
$(".pac-container").css("display","none");
$("#searchTextField").val(firstResult);
$(".pac-container").css("visibility","hidden");
moveMarker(placeName, latlng);
}
});
} else {
$(".pac-container").css("visibility","visible");
}
});
});
関連
-
[解決済み] Google Maps JS API v3 - シンプルな複数マーカーの例
-
[解決済み] Google Maps APIでマウスのスクロールホイールによる拡大縮小を無効にする方法
-
[解決済み] Angularjs - 現在の日付を表示する
-
[解決済み] なぜ "use strict "はパフォーマンスを10倍向上させるのか?
-
[解決済み] TypeScriptのdeclare classとinterfaceの違いとは?
-
[解決済み] AJAX Mailchimp サインアップフォームの統合
-
[解決済み] Chromeのwebkitインスペクタで「Unsafe JavaScript attempt to access frame with URL...」というエラーが継続的に発生する。
-
[解決済み] JavaScriptで長い配列を小さい配列に分割する方法
-
[解決済み] JavaScript で `throw` の後に `return` をする必要がありますか?
-
Google Places Autocomplete APIのドロップダウンをどのようにスタイリングしますか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】.keyCodeと.whichの比較
-
[解決済み] Google maps API V3 - 同一地点に複数のマーカーを設置する。
-
[解決済み] 文字列がすべて同じ部分文字列で構成されているかどうかを調べるにはどうすればよいですか?
-
[解決済み] node.jsで文字列のsha1ハッシュを取得するにはどうすればよいですか?
-
[解決済み] JavaScriptで:hoverのCSSプロパティを変更する
-
[解決済み] React js 親コンポーネントから子コンポーネントの状態を変更する
-
[解決済み] コールバック地獄とは何か、RXはそれをどのように、そしてなぜ解決するのか?
-
[解決済み] JavaScriptでjson-objectのキーを取得する [重複].
-
[解決済み] javascriptでオプションのパラメータを扱う
-
[解決済み] jQueryのバージョン1、バージョン2、バージョン3の違いは何ですか?[クローズド]