Googleプレイスオートコンプリート-Enterキーで最初の結果を選択しますか？
Googleプレイスオートコンプリートを使用しており、フォームフィールドでEnterキーが押され、候補が存在する場合、結果リストの一番上のアイテムを選択するだけです。私はこれが以前に尋ねられたことを知っています：
GoogleマップPlaces API V3オートコンプリート-Enterで最初のオプションを選択
GoogleはPlaces API V3のオートコンプリートをマップします-入力時に最初のオプションを選択します（そのままにします）
しかし、これらの質問の答えは実際には機能していないようであるか、特定の追加機能に対処しています。
また、次のようなものが動作するはずです（ただし、動作しません）。
$("input#autocomplete").keydown(function(e) {
if (e.which == 13) {
//if there are suggestions...
if ($(".pac-container .pac-item").length) {
//click on the first item in the list or simulate a down arrow key event
//it does get this far, but I can't find a way to actually select the item
$(".pac-container .pac-item:first").click();
} else {
//there are no suggestions
}
}
});
どんな提案も大歓迎です！
この質問の多くの回答とリンクされた質問の回答を何度も読みましたが、ベストアンサーは this one （注：残念ながら、受け入れられた回答ではありません！） 。
2行または3行を修正して、コードにコピー/貼り付けしてすぐに使用できる機能に変換し、多くの必要に応じてinput要素。ここにあります：
var selectFirstOnEnter = function(input){
// store the original event binding function
var _addEventListener = (input.addEventListener) ? input.addEventListener : input.attachEvent;
// Simulate a 'down arrow' keypress on hitting 'return' when no pac suggestion is selected, and then trigger the original listener.
function addEventListenerWrapper(type, listener) {
if (type == "keydown") {
var orig_listener = listener;
listener = function (event) {
var suggestion_selected = $(".pac-item-selected").length > 0;
if (event.which == 13 && !suggestion_selected) {
var simulated_downarrow = $.Event("keydown", { keyCode:40, which:40 });
orig_listener.apply(input, [simulated_downarrow]);
}
orig_listener.apply(input, [event]);
};
}
// add the modified listener
_addEventListener.apply(input, [type, listener]);
}
if (input.addEventListener) {
input.addEventListener = addEventListenerWrapper;
} else if (input.attachEvent) {
input.attachEvent = addEventListenerWrapper;
}
}
使用法：
selectFirstOnEnter(input1);
selectFirstOnEnter(input2);
...
Google Maps Places API V3オートコンプリートから回答を再投稿しています-Enter で最初のオプションを選択：
はるかに優れたクリーンなソリューションがあるようです：google.maps.places.SearchBox の代わりに google.maps.places.Autocomplete。コードはほとんど同じで、複数の場所から最初のコードを取得するだけです。 Enterを押すと、正しいリストが返されます-箱から出してすぐに実行され、ハッキングの必要はありません。
サンプルHTMLページを参照してください。
関連するコードスニペットは次のとおりです。
var searchBox = new google.maps.places.SearchBox(document.getElementById('searchinput'));
google.maps.event.addListener(searchBox, 'places_changed', function() {
var place = searchBox.getPlaces()[0];
if (!place.geometry) return;
if (place.geometry.viewport) {
map.fitBounds(place.geometry.viewport);
} else {
map.setCenter(place.geometry.location);
map.setZoom(16);
}
});
例の完全なソースコードは次のとおりです。 https://Gist.github.com/klokan/8408394
私のサイトでは、これと同じ機能を実現するために、jQueryシミュレーションプラグイン（ https://github.com/jquery/jquery-simulate ）を作成し、イベントを添付しました。
$("input#autocomplete").focusin(function () {
$(document).keypress(function (e) {
if (e.which == 13) {
$("input#autocomplete").trigger('focus');
$("input#autocomplete").simulate('keydown', { keyCode: $.ui.keyCode.DOWN } ).simulate('keydown', { keyCode: $.ui.keyCode.ENTER });
}
});
});
プラグインはDOWNキーを押してからENTERを押す動作をシミュレートします。ENTER自体は機能せず、最初のオプションを選択する別の方法が見つかりませんでした。
お役に立てれば
ユーザーが毎回誤ったナビゲーションをトリガーするのではなく、キーボードでリストを下にナビゲートし始めたかどうかをリッスンするワーキングソリューション
https://codepen.io/callam/pen/RgzxZB
ここに重要なビットがあります
// search input
const searchInput = document.getElementById('js-search-input');
// Google Maps autocomplete
const autocomplete = new google.maps.places.Autocomplete(searchInput);
// Has user pressed the down key to navigate autocomplete options?
let hasDownBeenPressed = false;
// Listener outside to stop nested loop returning odd results
searchInput.addEventListener('keydown', (e) => {
if (e.keyCode === 40) {
hasDownBeenPressed = true;
}
});
// GoogleMaps API custom eventlistener method
google.maps.event.addDomListener(searchInput, 'keydown', (e) => {
// Maps API e.stopPropagation();
e.cancelBubble = true;
// If enter key, or tab key
if (e.keyCode === 13 || e.keyCode === 9) {
// If user isn't navigating using arrows and this hasn't ran yet
if (!hasDownBeenPressed && !e.hasRanOnce) {
google.maps.event.trigger(e.target, 'keydown', {
keyCode: 40,
hasRanOnce: true,
});
}
}
});
// Clear the input on focus, reset hasDownBeenPressed
searchInput.addEventListener('focus', () => {
hasDownBeenPressed = false;
searchInput.value = '';
});
// place_changed GoogleMaps listener when we do submit
google.maps.event.addListener(autocomplete, 'place_changed', function() {
// Get the place info from the autocomplete Api
const place = autocomplete.getPlace();
//If we can find the place lets go to it
if (typeof place.address_components !== 'undefined') {
// reset hasDownBeenPressed in case they don't unfocus
hasDownBeenPressed = false;
}
});
これは私がやったことであり、動作します：
HTML：
<input name="location" id="autocomplete" autocomplete="off" type="text" class="textbx" placeholder="Enter Destination" required>
googleautocompletecustomized.js：
function initialize() {
// Create the autocomplete object, restricting the search
// to geographical location types.
if($('#autocomplete').length){
autocomplete = new google.maps.places.Autocomplete(
(document.getElementById('autocomplete')),
{
types: ['(regions)'],
componentRestrictions: {country: "in"}
});
google.maps.event.addListener(autocomplete, 'place_changed', function() {
$('#autocomplete').closest('form').data('changed', true);
fillInAddress();
});
}
//select first result
$('#autocomplete').keydown(function (e) {
if (e.keyCode == 13 || e.keyCode == 9) {
$(e.target).blur();
if($(".pac-container .pac-item:first span:eq(3)").text() == "")
var firstResult = $(".pac-container .pac-item:first .pac-item-query").text();
else
var firstResult = $(".pac-container .pac-item:first .pac-item-query").text() + ", " + $(".pac-container .pac-item:first span:eq(3)").text();
var geocoder = new google.maps.Geocoder();
geocoder.geocode({"address":firstResult }, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
placeName = results[0];
e.target.value = firstResult;
fillInAddress(placeName);
$('#datetimepicker1 .input-group-addon').click();
}
});
}
});
}
// [START region_fillform]
function fillInAddress(place) {
// Get the place details from the autocomplete object.
if(!place)
var place = autocomplete.getPlace();
for (var component in componentForm) {
document.getElementById(component).value = '';
document.getElementById(component).disabled = false;
}
// Get each component of the address from the place details
// and fill the corresponding field on the form.
for (var i = 0; i < place.address_components.length; i++) {
var addressType = place.address_components[i].types[0];
if (componentForm[addressType]) {
var val = place.address_components[i][componentForm[addressType]];
document.getElementById(addressType).value = val;
}
}
}
これは私に解決した最も簡単な方法です：
autocomplete.addListener('place_changed', function() {
if(event.keyCode == 13 || event.keyCode == 9) { // detect the enter key
var firstValue = $(".pac-container .pac-item:first").text(); // assign to this variable the first string from the autocomplete dropdown
}
$('#search-address').val(firstValue); // add this string to input
console.log(firstValue); // display the string on your browser console to check what it is
//(...) add the rest of your code here
});
}
Angular 2,4、5＆6を使用している場合、以下のリンクで答えを見つけてください