3
我有一個jQuery自動完成文本框設置。JQuery自動完成懸停高亮寬度
它在用戶輸入地址並正確返回數據時檢索地址。
自動完成下拉是最寬地址結果的寬度,這是我想要的。
但是,當通過將鼠標懸停在結果頂部來突出顯示列表中的某個地址時,它只會突出顯示文本,而不會突出顯示自動填充文本框邊緣的所有內容。
無論如何要改變這種情況,以便突出顯示的背景將一直延伸到列表中每個項目的自動完成文本框的邊緣?
.ui-menu
{
list-style: none;
padding: 2px;
margin: 0;
display: no;
float: left;
background-color: white;
border: 1px solid #DDD;
font-family: 'PTSansRegular', 'Helvetica Neue', Helvetica, Arial;
font-size: 17px;
}
.ui-autocomplete li.ui-menu-item
{
padding: 1px;
width:350px;
}
.ui-autocomplete a.ui-menu-item-alternate
{
background-color: White;
}
.ui-autocomplete a.ui-state-hover
{
font-weight: normal !important;
background-color: #003768;
color:White;
}
a.ui-state-hover
{
width: 100px;
}
// jQuery代碼
$(document).ready(function() {
$('#Suburb').autocomplete({
source: function (request, response) {
$.ajax({
url: '@Url.Action("GetAddress", "ClientDetails")',
data: { suburb: request.term },
dataType: 'json',
type: 'POST',
success: function (data) {
response($.map(data, function (item) {
return {
label: item.Locality + ', ' + item.State + ', ' + item.Pcode,
value: { locality: item.Locality, postCode: item.Pcode, state: item.State, country: 'Australia' }
}
}));
}
});
},
minLength: 4,
select: function (event, ui) {
console.log(ui.item.value);
$('#Suburb').val(ui.item.value.locality);
$("#StateID option").each(function() {
if ($(this).text() == ui.item.value.state) {
$(this).attr('selected', 'selected');
}
});
$('#Postcode').val(ui.item.value.postCode);
$("#CountryID option").each(function() {
if ($(this).text() == ui.item.value.country) {
$(this).attr('selected', 'selected');
}
});
$('#Password').focus();
return false;
},
open: function() {
$(this).removeClass("ui-corner-all").addClass("ui-corner-top");
},
close: function() {
$(this).removeClass("ui-corner-top").addClass("ui-corner-all");
}
});
});
難道這是導致問題? a.ui-state-hover {width:100px;}也許應該是{width:100%} – VIDesignz
對不起,你是對的。它應該是100%。不幸的是,這並沒有解決問題。 – Ben
將.ui-autocomplete也添加到100%,看看它是否有幫助。什麼是您的HTML下拉/ textarea – VIDesignz