0

アニメーションGIFを進行中のオートコンプリート検索ボックスに配置するにはどうすればよいですか？

<script type="text/javascript">
$(document).ready(function(){
    $('head').append('<link rel="stylesheet" href="/js/autocomplete/styles.css" type="text/css" />');
    $('#search').autocomplete({
        serviceUrl: '/js/autocomplete/search-box.php',
        onSelect: function(value, data){
            location.href='http://www.domain.com/'+data['id']+'/';
        }       
    });
});
</script>

スタイル

.autocomplete-w1 { background:url(shadow.png) no-repeat bottom right; position:absolute; top:0px; left:0px; margin:8px 0 0 6px; /* IE6 fix: */ _background:none; _margin:0; }
.autocomplete { border:1px solid #999; background:#FFF; cursor:default; text-align:left; max-height:350px; overflow:auto; margin:-6px 6px 6px -6px; /* IE6 specific: */ _height:350px;  _margin:0; _overflow-x:hidden; }
.autocomplete .selected { background:#F0F0F0; }
.autocomplete div { padding:2px 5px; white-space:nowrap; }
.autocomplete strong { font-weight:normal; color:#3399FF; }
.working{background:url('/js/wait.gif') no-repeat right center;}
4

1 に答える 1

0

これを試して：

$('#search').autocomplete({
    serviceUrl: '/js/autocomplete/search-box.php',
    onSelect: function(value, data){
        location.href='http://www.domain.com/'+data['id']+'/';
    },
    search: function( ){
        $(this).addClass('working');
    },
    open: function( ){
        $(this).removeClass('working');
    }
});

または、そのために CSS を使用することもできます。Autocomplete プラグインは既に class.ui-autocomplete-loadingを追加しているため、css に次のように記述できます。

.ui-autocomplete-loading{background:url('/js/wait.gif') no-repeat right center;}

.workingクラス名の代わりに。

于 2012-07-05T10:29:09.293 に答える