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

});

Answer 1

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