Question

所以我使用谷歌地图api填写后端的一些信息，但如果用户没有“点击”下拉选项，后端永远不会填充数据。

我在这里找到了有关堆栈溢出的解决方法：link但是没有任何内容会在模糊/焦点上触发。

class BFrame
{
    string Value{get; set;}
}

class Tag
{
    BFrame Frame{get;}
}

public void func(Tag tag, string newValue)
{
    PropertyInfo frameProperty = tag.GetType().GetProperty("Frame");
    var oldValue = frameProperty.GetValue(tag);
    //frameProperty.SetValue(tag, newValue); //Doesn't work. Throws exception because there is no setter
    //TODO: Set the Value property inside the BFrame class
    //Somethig like this: tag.Frame.Value = newValue;
}

我理解代码在做什么。单击选项卡或输入时，它会模拟向下箭头按下。我尝试添加一个模糊的监听器，但没有任何作用。该事件仍然被触发，但它没有选择或更新。

在这种情况下会喜欢一些帮助。谢谢！

Answer 1

您是否检查过输入字段是否绑定了多个下拉列表？其他实例

var autocomplete = new google.maps.places.Autocomplete(input);

别的地方？结果我们有三个。取出其中两个后，您的解决方案对我有用。

Answer 2

inputAddress作为自动填充输入，您可以执行以下操作：

// Trigger search on blur
document.getElementById('inputAddress').onblur = function () {

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

或使用Google地图事件监听器：

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

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

仅此一项就会干扰用户通过鼠标点击选择建议。因此，为了防止这种情况，您需要再进行一些检查。以下是一个完整的例子。阅读代码注释以获取更多信息。

如果您在项目中使用jQuery，请查看完全相同的this answer。

function initialize() {

  var ac = new google.maps.places.Autocomplete(
    (document.getElementById('inputAddress')), {
      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("inputAddress"), '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;
}

#inputAddress {
  width: 300px;
}

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

谷歌地图api自动完成模糊/焦点？

2 个答案: