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

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

1 个答案: