Google自动完成-输入以选择

79

我为HTML表单的文本字段设置了Google自动填充功能，并且运行良好。

但是，当出现建议列表时，使用箭头滚动并使用Enter选择，它将提交表单，尽管仍然需要填写框。如果单击以选择建议，则可以正常工作，但按Enter即可提交。

我该如何控制？我如何才能停止输入表单的输入，而是从自动完成中选择建议？

谢谢！{S}

autocomplete 
— 金克斯尼克
source

Answers:

110

您可以用来preventDefault在输入被点击时停止提交表单，我使用了类似的方法：

  var input = document.getElementById('inputId');
  google.maps.event.addDomListener(input, 'keydown', function(event) { 
    if (event.keyCode === 13) { 
        event.preventDefault(); 
    }
  });
— ren
source
2
这将始终取消该字段中的提交。如果用户已按介绍性按钮选择自动完成选项，则只需要取消提交即可。
— A.MatíasQuezada
1
像宝石一样工作。选中并从带有Enter的列表中选择一个自动完成选项将不再提交表单。
— 埃里克L.15年
这比解决方案更具统一性。与onClick处理程序（而非onSubmit处理程序）提交表单的用法相同。输入应提交的表格。
— Alex Fedoseev
4
keyup在过去的半个小时中，我一直在尝试解决我的问题，而您确实做到了。因此，人们，不要keyup
— Nico
52

使用Google事件处理似乎是正确的解决方案，但它对我不起作用。这个jQuery解决方案为我工作：

$('#inputId').keydown(function (e) {
  if (e.which == 13 && $('.pac-container:visible').length) return false;
});

.pac-container是保存自动填充匹配项的div。想法是，当匹配可见时，Enter键将仅选择活动的匹配。但是，如果隐藏了匹配项（即已选择位置），它将提交表单。

— mmalone
source
工作精美，谢谢。简单有效。
— luke_mclachlan 2015年
可能是最优雅的解决方案。谢谢！
— Nikolay Traykov '16
但这是否不允许在空字段中提交表单的输入？在选择地址之前？
— amosmos '16
1
这在Chrome中不起作用。如果输入在表单内，则Chrome键事件似乎无法检测到Enter。
— Bruno
1
此解决方案的唯一缺点是，如果Google决定更改它们注入到您的页面中的HTML并将其重命名.pac-container为其他名称，则这将中断。
— 贾斯汀·坦纳
21

我将@sren和@mmalone的前两个答案合并在一起以产生此结果：

var input= document.getElementById('inputId');
google.maps.event.addDomListener(input, 'keydown', function(e) { 
    if (e.keyCode == 13 && $('.pac-container:visible').length) { 
        e.preventDefault(); 
    }
});

在页面上完美工作。防止在可见建议容器（.pac-container）时提交表单。因此，现在，当用户按下Enter键时，会从“自动完成”下拉列表中选择一个选项，他们必须再次按下它才能提交表单。

使用此变通办法的主要原因是因为我发现，如果在选择选项后立即通过回车键发送了表单，则纬度和经度值没有足够快地传递到其隐藏的表单元素中。

全部归功于原始答案。

— luke_mclachlan
source
7

这个为我工作：

google.maps.event.addDomListener(input, 'keydown', e => {

  // If it's Enter
  if (e.keyCode === 13) {

    // Select all Google's dropdown DOM nodes (can be multiple)
    const googleDOMNodes = document.getElementsByClassName('pac-container');

    // Check if any of them are visible (using ES6 here for conciseness)
    const googleDOMNodeIsVisible = (
      Array.from(googleDOMNodes).some(node => node.offsetParent !== null)
    );

    // If one is visible - preventDefault
    if (googleDOMNodeIsVisible) e.preventDefault();

  }

});

可以轻松地从ES6转换为任何浏览器兼容的代码。

— 亚历克斯·费多谢夫（Alex Fedoseev）
source
我喜欢您的回答，但为了使它起作用，我不得不对其进行一些调整。发表我的解决方案。
— 舒尔维茨2015年
4

我对@sren的回答存在的问题是，它始终阻止了Submit事件。我喜欢@mmalone的答案，但是它表现得很随机，因为有时当我点击ENTER选择位置时，处理程序在容器被隐藏后运行。所以，这就是我最终要做的

var location_being_changed,
    input = document.getElementById("js-my-input"),
    autocomplete = new google.maps.places.Autocomplete(input),
    onPlaceChange = function () {
        location_being_changed = false;
    };

google.maps.event.addListener( this.autocomplete,
                               'place_changed',
                               onPlaceChange );

google.maps.event.addDomListener(input, 'keydown', function (e) {
    if (e.keyCode === 13) {
        if (location_being_changed) {
            e.preventDefault();
            e.stopPropagation();
        }
    } else {
        // means the user is probably typing
        location_being_changed = true;
    }
});

// Form Submit Handler
$('.js-my-form').on('submit', function (e) {
    e.preventDefault();
    $('.js-display').text("Yay form got submitted");
});
<p class="js-display"></p>
<form class="js-my-form">
    <input type="text" id="js-my-input" />
    <button type="submit">Submit</button>
</form>

<!-- External Libraries -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>
展开摘要

该标志可确保如果位置发生更改且用户点击进入，则事件将被阻止。最终，该标志被falseGoogle Map的place_changed事件设置为，然后允许在按Enter键时提交表单。

— 穆达西尔·阿里（Mudassir Ali）
source
这段代码实际上对我有用，谢谢您的努力！
— 动物汗
如果用户编写，单击回车，然后向下箭头（或任何不会触发自动完成的键），则此代码避免提交。此后，返回被阻止。
— Natxet
1

这是一个很适合我的简单代码（不使用jquery）。

const googleAutcompleteField = this.renderer.selectRootElement(this.elem.nativeElement);
this.selectOnEnter(googleAutcompleteField);

遵循上面的代码，这段代码用于实现google maps自动完成功能（有或没有此问题中寻求的Enter键功能）：

this.autocomplete = new google.maps.places.Autocomplete(googleAutcompleteField, this.googleMapsOptions);
this.autocomplete.setFields(['address_component', 'formatted_address', 'geometry']);
this.autocomplete.addListener('place_changed', () => {
  this.zone.run(() => {
    this.googleMapsData.emit([this.autocomplete.getPlace()]);
  })
})

selectOnEnter（在上面的第一段代码中调用）定义：

selectOnEnter(inputField) {
  inputField.addEventListener("keydown", (event) => {
    const selectedItem = document.getElementsByClassName('pac-item-selected');
    if (event.key == "Enter" && selectedItem.length != 0) {
      event.preventDefault();
    }
  })
}

此代码使Google Maps自动填充字段选择用户使用向下箭头按键选择的项。一旦用户按下Enter键选择一个选项，就不会发生任何事情。用户必须再次按Enter才能触发onSubmit（）或其他命令

— 编码器101
source
0

我调整了Alex的代码，因为它在浏览器中损坏了。这对我来说很完美：

google.maps.event.addDomListener(
    document.getElementById('YOUR_ELEMENT_ID'),
    'keydown',
    function(e) {
          // If it's Enter
          if (e.keyCode === 13) {
            // Select all Google's dropdown DOM nodes (can be multiple)
            const googleDOMNodes = document.getElementsByClassName('pac-container');
            //If multiple nodes, prevent form submit.
            if (googleDOMNodes.length > 0){
                e.preventDefault();
            }
            //Remove Google's drop down elements, so that future form submit requests work.
            removeElementsByClass('pac-container');
          }
    }
);

function removeElementsByClass(className){
    var elements = document.getElementsByClassName(className);
    while(elements.length > 0){
        elements[0].parentNode.removeChild(elements[0]);
    }
}
— 舒尔维茨
source
0

我已经尝试了上面的简短答案，但是它们对我没有用，而冗长的答案我不想尝试，所以我创建了以下代码，这些代码对我来说非常有效。观看演示

假设这是您的表格：

<form action="" method="">
      <input type="text" name="place" id="google-places-searchbox" placeholder="Enter place name"><br><br>
      <input type="text" name="field-1" placeholder="Field 1"><br><br>
      <input type="text" name="field-2" placeholder="Field 2"><br><br>
      <button type="submit">Submit</button>
</form>

然后，以下JavaScript代码将解决该问题：

var placesSearchbox = $("#google-places-searchbox");

placesSearchbox.on("focus blur", function() {
    $(this).closest("form").toggleClass('prevent_submit');
});

placesSearchbox.closest("form").on("submit", function(e) {
    if (placesSearchbox.closest("form").hasClass('prevent_submit')) {
        e.preventDefault();
        return false;
    }
});

这是完整代码在HTML页面中的样子（请注意，您需要YOUR_API_KEY用Google api键替换）：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Prevent form submission when choosing a place from google places autocomplete searchbox</title>
</head>
<body>
  <form action="" method="">
      <input type="text" name="place" id="google-places-searchbox" placeholder="Enter place name"><br><br>
      <input type="text" name="field-1" placeholder="Field 1"><br><br>
      <input type="text" name="field-2" placeholder="Field 2"><br><br>
      <button type="submit">Submit</button>
  </form>

  <!-- jQuery -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

  <!-- Google Maps -->
  <!-- Note that you need to replace the next YOUR_API_KEY with your api key -->
  <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"
     async defer></script>
  <script>
    var input = document.getElementById("google-places-searchbox");
    var searchBox = new google.maps.places.SearchBox(input);

    var placesSearchbox = $("#google-places-searchbox");

    placesSearchbox.on("focus blur", function() {
        $(this).closest("form").toggleClass('prevent_submit');
    });

    placesSearchbox.closest("form").on("submit", function(e) {
        if (placesSearchbox.closest("form").hasClass('prevent_submit')) {
            e.preventDefault();
            return false;
        }
    });
  </script>
</body>
</html>
— 阿姆
source
0 
$("#myinput").on("keydown", function(e) {
if (e.which == 13) {

if($(".pac-item").length>0)
        {
            $(".pac-item-selected").trigger("click");
}

}

使用$('.pac-item:first').trigger('click');，如果你想选择第一个结果

— 摩尔·辛格
source
0

您可以在香草中进行：

element.addEventListener('keydown', function(e) {
    const gPlaceChoices = document.querySelector('.pac-container')
    // No choices element ? 
    if (null === gPlaceChoices) {
        return
    }
    // Get choices visivility
    let visibility = window.getComputedStyle(gPlaceChoices).display
    // In this case, enter key will do nothing
    if ('none' !== visibility && e.keyCode === 13) {
        e.preventDefault();
     }
 })
— Digivia
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.