JQuery Autocomplete Hover Highlight Width

Question

I have a jquery autocomplete textbox setup.

It retrieves addresses as the user types in their address and is returning data correctly.

The autocomplete drop down is the width of the widest address result, which is want I want.

However, when I highlight an address in the list by hovering the mouse over the top of the result, it only highlights the text and not all the way to the edge of the autocomplete textbox.

Is there anyway to change this so that the highlighted background will extend all the way to the edge of the autocomplete textbox for each item in the list?

.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 code

$(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" );
        }            
    });

});

Could it be this causing the problem? a.ui-state-hover {width: 100px;} Maybe should be {width:100%} — VIDesignz
Sorry, you're right. It should have been 100%. Unfortunately this hasn't fixed the problem. — Ben
Add the 100% to .ui-autocomplete as well, see if it helps. Whats your html for the dropdown / textarea — VIDesignz
I've added 100% to the .ui-autocomplete as well but this didn't resolve the issue. I've added my jquery code to my initial question above. — Ben

Scott Selby Scott Selby · Accepted Answer · 2012-11-05T02:34:52

each <li> should have class="ui-menu-item"

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

now you have it -

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

I have this on mine for <a> and it works

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

JQuery Autocomplete Hover Highlight Width

1 Answers