javascript - Show google map suggestion in a fixed div as a list and not as drop down -

this dynamically generated ul in google suggestions in being shown drop down

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

i want show these suggestion in div right input text box .

.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;  } 

margin doesn't seem work though, when select suggestion list of suggestion doesn't show in input field.

java script code -- >

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 geocoder 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 executed upon selection of address       select: function(event, ui) {          var location = new google.maps.latlng(ui.item.latitude, ui.item.longitude);         marker.setposition(location);         map.setcenter(location);           }      });   });    }); 

add line autocomplete attributes,

appendto: "#someelem" 

for reference api jquery ui

for margin work try,

display:block;