JQuery 自动完成悬停突出显示宽度

Question

我有一个 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" );
        }            
    });

});

Answer 1

每个<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;
}