2012-11-05 38 views
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"); 
     }    
    }); 

}); 
+0

難道這是導致問題? a.ui-state-hover {width:100px;}也許應該是{width:100%} – VIDesignz

+0

對不起,你是對的。它應該是100%。不幸的是,這並沒有解決問題。 – Ben

+0

將.ui-autocomplete也添加到100%,看看它是否有幫助。什麼是您的HTML下拉/ textarea – VIDesignz

回答

3

每個<li>應該有class="ui-menu-item"

.ui-menu-item { 
margin: 0; 
padding: 0; 
zoom: 1; 
float: left; 
clear: left; 
width: 100%; 
} 

現在你擁有了它 -

.ui-autocomplete li.ui-menu-item 
{ 
    padding: 1px; 
    width:350px; 
} 

我有這個礦上爲<a>它可以工作

.ui-menu-item a { 
text-decoration: none; 
display: block; 
padding: .2em .4em; 
line-height: 1.5; 
zoom: 1; 
} 
+0

輝煌!我使用了你的代碼,並且做到了這一點。感謝堆。 – Ben