[英]Animated gif show on JQuery Autocomplete search box
How can i put Animated gif on progress Autocomplete search box ? 如何将动画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>
Style 样式
.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;}
Try this: 尝试这个:
$('#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');
}
});
Or you can use CSS for that. 或者,您可以使用CSS。 Autocomplete plugin already adds class
.ui-autocomplete-loading
, so in your css you can write: Autocomplete插件已经添加了
.ui-autocomplete-loading
,因此可以在CSS中编写:
.ui-autocomplete-loading{background:url('/js/wait.gif') no-repeat right center;}
Instead of .working
class name. 而不是
.working
类名称。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.