JQuery自動完成搜索框的動畫gif展示

Question

我如何將自動完成搜索框的進度設置爲動畫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;} 

Answer 1

試試這個：

$('#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這一點。自動完成插件已經增加了.ui-autocomplete-loading類，所以在你的CSS，你可以這樣寫：

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

而不是.working類名。