Google自动完成Places API不会通过TAB触发事件更改 [英] Google Autocomplete Places API not triggering event on change via TAB

问题描述

根据Google自动完成Places API文档，getPlace（）调用应该返回一个包含所有位置数据的Places对象，或者如果该位置不存在（即 - 用户忽略了这些建议），它应该返回一个存根填充Places对象的名称元素。但是，它只在用户点击ENTER时进行后一操作，而不是在TAB出现在字段外。

我尝试着看着变化事件，keyup，keydown事件。我试着用keycode 13来触发一个关于模糊的keydown事件等等。似乎没有什么可行的。

有没有人克服过这个问题？看起来非常明显，用户可以通过表单进行选择，并且总有可能他们忽略这些建议。

解决方案

pac-input 作为您的地点搜索输入，您可以执行以下操作：

  //触发搜索模糊
 document.getElementById（'pac-input'）。onblur = function（）{
 
 google.maps.event.trigger（this，'focus'，{ }）; 
 google.maps.event.trigger（this，'keydown'，{
 keyCode：13 
}）; 
}; 
  

或者使用Google地图事件侦听器：

  //触发模糊搜索
 google.maps.event.addDomListener（document.getElementById（pac-input），'blur'，function（）{
 
 google.maps.event.trigger（this，'focus'，{}）; 
 google.maps.event.trigger（this，'keydown'，{
 keyCode：13 
}）; 
}）; 
  

---

编辑：在评论中提到，这会让用户通过点击鼠标来选择一个地方的正常行为变得混乱。

下面是一个使用纯Javascript的完整示例。对于（更简单的）jQuery解决方案，请查看 @ ChrisSnyder的答案。

< pre class =snippet-code-js lang-js prettyprint-override> function initialize（）{var ac = new google.maps.places.Autocomplete（（document.getElementById（'autocomplete'）） ，{types：['geocode']}）; ac.addListener（'place_changed'，function（）{var place = ac.getPlace（）; if（！place.geometry）{//用户输入了一个没有建议的地方的名字并//按下Enter键，或地点详细信息请求失败。console.log（没有可用于输入的详细信息：'+ place.name +'）; return;} console.log（您选择了：'+ place.formatted_address +' ）;}）; //触发模糊搜索google.maps.event.addDomListener（document.getElementById（autocomplete），'blur'，function（）{//查找pac-container元素var pacContainer = nextByClass（this，'pac-container '）; //检查我们是否在一个pac-items上悬停//：hover传播到父元素，所以我们只需要在pac-container上检查//我们只在以下情况下触发焦点和keydown：hover是如果（pacContainer.matches（'：hover'）=== false）{google.maps.event.trigger（this，'focus'，{}）; google.maps .event.trigger（this，'keydown'，{keyCode：13}）;}}）;}函数hasClass（elem，cls）{var str =+ elem.className +; var testCls =+ cls +; return（str.indexOf（testCls）！= -1）;} function nextByClass（node，cls）{while（node = node.nextSibling）{if（hasClass（node，cls））{return node; }} return null;}

#autocomplete {width：300px ;}

< script src =https：// maps.googleapis.com/maps/api/js?libraries=places&callback=initializeasync defer>< / script>< input id =autocompleteplaceholder =输入您的地址type =text> < / input>

Per the Google Autocomplete Places API documentation, the getPlace() call should return a Places object with all the location data, or, if that place doesn't exist (i.e. - the user ignored the suggestions), it should return a stub with just the name element of the Places object filled in. However, it only does this latter operation when the user hits ENTER, not if they TAB out of the field.

I've tried looking at the change event, the keyup, keydown events. I've tried triggering a keydown event with keycode 13 on blur, etc. etc. Nothing seems to work.

Has anyone overcome this issue? It seems pretty obvious that a user would tab through a form, and there's always the possibility they ignore the suggestions.

解决方案

pac-input being your place search input, you can do the following:

// Trigger search on blur
document.getElementById('pac-input').onblur = function () {

    google.maps.event.trigger(this, 'focus', {});
    google.maps.event.trigger(this, 'keydown', {
        keyCode: 13
    });
};

Or with a google maps event listener:

// Trigger search on blur
google.maps.event.addDomListener(document.getElementById("pac-input"), 'blur', function() {

    google.maps.event.trigger(this, 'focus', {});
    google.maps.event.trigger(this, 'keydown', {
        keyCode: 13
    });
});

---

Edit: As mentioned in the comments, this messes up with the "normal behavior" of a user selecting a place by mouse click.

Below is a complete example using pure Javascript. For a (simpler) jQuery solution, look at @ChrisSnyder's answer.

function initialize() {

  var ac = new google.maps.places.Autocomplete(
    (document.getElementById('autocomplete')), {
      types: ['geocode']
    });

  ac.addListener('place_changed', function() {

    var place = ac.getPlace();

    if (!place.geometry) {

      // User entered the name of a Place that was not suggested and
      // pressed the Enter key, or the Place Details request failed.
      console.log("No details available for input: '" + place.name + "'");
      return;
    }

    console.log("You selected: '" + place.formatted_address + "'");
  });

  // Trigger search on blur
  google.maps.event.addDomListener(document.getElementById("autocomplete"), 'blur', function() {

    // Find the pac-container element
    var pacContainer = nextByClass(this, 'pac-container');

    // Check if we are hovering on one of the pac-items
    // :hover propagates to parent element so we only need to check it on the pac-container
    // We trigger the focus and keydown only if :hover is false otherwise it will interfere with a place selection via mouse click
    if (pacContainer.matches(':hover') === false) {

      google.maps.event.trigger(this, 'focus', {});
      google.maps.event.trigger(this, 'keydown', {
        keyCode: 13
      });
    }

  });
}

function hasClass(elem, cls) {
  var str = " " + elem.className + " ";
  var testCls = " " + cls + " ";
  return (str.indexOf(testCls) != -1);
}

function nextByClass(node, cls) {
  while (node = node.nextSibling) {
    if (hasClass(node, cls)) {
      return node;
    }
  }
  return null;
}

#autocomplete {
  width: 300px;
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=places&callback=initialize" async defer></script>
<input id="autocomplete" placeholder="Enter your address" type="text"></input>

这篇关于Google自动完成Places API不会通过TAB触发事件更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！