javascript - 固定 div に Google マップの提案をドロップダウンではなくリストとして表示する

Question

これは動的に生成された UL で、Google の提案がドロップダウンとして表示されます

   <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);


        }

    });
  });



});