3

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

});
4

1 に答える 1

4

それぞれ<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;
}
于 2012-11-05T02:34:52.613 に答える