谷歌自动补全选中地址后输入框未自适应宽度的解决问询

Hey there, the issue you're facing makes total sense—your current resize logic only listens for keyboard events (keypress/keyup), but Google Places Autocomplete updates the input's value directly without triggering those events. That's why the width doesn't adjust after selecting an address.

Here's a simple fix that reuses your existing resizeForText function:

Step 1: Make resizeForText globally accessible #

First, move the resizeForText function outside of your $(document).ready() block so it can be called from the Google Places callback. This keeps your code DRY (Don't Repeat Yourself) by reusing the logic you already wrote:

// Move this function outside $(document).ready() to make it globally accessible
function resizeForText(text) {
  var $this = $(this);
  if (!text.trim()) {
    text = $this.attr('placeholder').trim();
  }
  var $span = $this.parent().find('span');
  $span.text(text);
  var $inputSize = $span.width();
  $this.css("width", $inputSize);
}

$(document).ready(function () { 
  var $inputs = $('.resizing-input'); 

  // Your existing keypress handler
  $inputs.find('input').keypress(function (e) {
    if (e.which && e.charCode) {
      var c = String.fromCharCode(e.keyCode | e.charCode);
      var $this = $(this);
      resizeForText.call($this, $this.val() + c);
    }
  }); 

  // Your existing keyup handler
  $inputs.find('input').keyup(function (e) {
    if (e.keyCode === 8 || e.keyCode === 46) {
      resizeForText.call($(this), $(this).val());
    }
  }); 

  // Initialize input widths on page load
  $inputs.find('input').each(function () {
    var $this = $(this);
    resizeForText.call($this, $this.val()) 
  }); 
});

Step 2: Trigger resize in the Google Places callback #

Update your onPlaceChanged function to call resizeForText after the input's value has been updated by Google Places. Add this line at the end of the function:

function onPlaceChanged() {
  var place = this.getPlace();
  
  // Your existing code to populate form fields...
  document.getElementById("street_number").value = '';
  document.getElementById("route").value = '';
  document.getElementById("postal_code").value = '';
  document.getElementById("locality").value = '';
  document.getElementById("sublocality").value = '';
  document.getElementById("country").value = '';

  for (var i in place.address_components) {
    var component = place.address_components[i];
    for (var j in component.types) {
      var type_element = document.getElementById(component.types[j]);
      if (type_element) {
        type_element.value = component.long_name;
      }
    }
  }

  var longitude = document.getElementById("longitude");
  var latitude = document.getElementById("latitude");
  longitude.value = place.geometry.location.lng();
  latitude.value = place.geometry.location.lat();

  // NEW: Resize the autocomplete input to match the selected address
  var autocompleteInput = $('#autocomplete');
  resizeForText.call(autocompleteInput, autocompleteInput.val());
}

Why this works #

When a user selects an address from the Google Places dropdown, the place_changed event fires. At this point, the input's value has already been set to the selected address. Calling resizeForText here uses your existing logic to calculate the correct width based on the new value, just like it does for keyboard input.

Alternatively, you could also listen for the input event on the input element (which triggers when the value changes programmatically), but directly calling the resize function from the place_changed callback is more reliable and targeted for this specific use case.

内容的提问来源于stack exchange，提问作者Maxence