这是动态生成的 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);
}
});
});
});