Question

我正在使用Google的自动完成API。我还使用了一个动画自动完成字段的JQuery，使其更宽。但是，当我在自动完成字段上浮动时，下拉列表未正确定位。

要测试此类型的字母然后将焦点移离字段，然后再次关注该字段，您将看到字段和下拉列表变宽，但是在2个不同的方向上。

（注意：它适用于float：left，但我想为此使用float）

<!DOCTYPE html>

<html>

  <head>

    <title>Place Autocomplete Form</title>

    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">

    <meta charset="utf-8">

    <link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">

    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&libraries=places"></script>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>

    <script>

        function initialize() {

          autocomplete = new google.maps.places.Autocomplete(
          /** @type {HTMLInputElement} */(document.getElementById('autocomplete')));

          $('#autocomplete').focus(function() {

            $(this).attr('data-default', $(this).width());
            $(this).animate({ width: 315 }, 'slow');
            $('.pac-container').animate({ width: 315 }, 'slow');

        }).blur(function() {

            var w = 150;
            $(this).animate({ width: w }, 'slow');
            $('.pac-container').animate({ width: w }, 'slow');

        });

        }

    </script>

    <style>

      #autocomplete {
        position: absolute;
        top: 0px;
        margin-right:300px;
        right: 0px;
        width: 150px;
        float:right;
      }

    </style>

  </head>

  <body onload="initialize()">

    <div id="locationField">

      <input id="autocomplete" placeholder="Enter your address" 
      onFocus="geolocate()" type="text"></input>

    </div>

  </body>

</html>

更改自动填充字段和下拉列表的宽度会使它们朝两个不同的方向移动

0 个答案: