javascript - 在固定的 div 中将谷歌地图建议显示为列表而不是下拉列表

Question

这是动态生成的 ul，其中谷歌建议显示为下拉列表

   <ul class="ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all" role="listbox" aria-activedescendant="ui-active-menuitem" style="z-index: 1; top: -1734.72px; left: 105px; display: none; position: relative; width: 300px;">


<li class="ui-menu-item" role="menuitem">
<li class="ui-menu-item" role="menuitem">
<li class="ui-menu-item" role="menuitem">
<li class="ui-menu-item" role="menuitem">
<li class="ui-menu-item" role="menuitem">
<li class="ui-menu-item" role="menuitem">
<li class="ui-menu-item" role="menuitem">
<li class="ui-menu-item" role="menuitem">
</ul>
<ul class="ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all" role="listbox" aria-activedescendant="ui-active-menuitem" style="z-index: 1; top: 0px; left: 0px; display: none;"></ul>

我想在输入文本框右侧的 div 中显示这些建议。

.ui-autocomplete {
    background-color: #ccc;
    width: 300px;
    border: 1px solid #cfcfcf;
    list-style-type: none;
    padding-left: 0px;
    margin-top:300px;
}
.ui-autocomplete li:hover {

background-color: white;
}

.ui-corner-all{
font-size:18px;
margin-top:300px;

}

边距似乎不起作用，而且当我从建议列表中选择任何建议时，它也没有显示在输入字段中。

Java 脚本代码——>

function initialize(){
//MAP
  var latlng = new google.maps.LatLng(41.659,-4.714);
  var options = {
    zoom: 16,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
   map = new google.maps.Map(document.getElementById("map_canvas"), options);

  //GEOCODER
  geocoder = new google.maps.Geocoder();

  marker = new google.maps.Marker({
   map: map,

    draggable: true

  });

}

jQuery(document).ready(function() {
  initialize();

  jQuery(function() {  
    jQuery("#address").autocomplete({
      //This bit uses the geocoder to fetch address values
      source: function(request, response) {
        geocoder.geocode( {'address': request.term }, function(results, status) {
          response(jQuery.map(results, function(item) {
            return {            
              label:  item.formatted_address,
              value: item.formatted_address,
              latitude: item.geometry.location.lat(),
              longitude: item.geometry.location.lng()
            }
          }));
        })
      },
      //This bit is executed upon selection of an address
      select: function(event, ui) {

        var location = new google.maps.LatLng(ui.item.latitude, ui.item.longitude);
        marker.setPosition(location);
        map.setCenter(location);


        }

    });
  });



});

Answer 1

将这一行添加到您的自动完成属性中，

appendTo: "#someElem"

供您引用API Jquery UI

尝试 margin 工作，

显示: block ；