使用 jQuery-ui 自动完成显示加载 gif
Display loading gif with jQuery-ui autocomplete
我正在使用 jQuery-ui 自动完成版本 v1.12.1。如何添加加载 GIF?我正在尝试仅使用 jQuery 检索数据...没有 AJAX 调用。
jQuery(document).ready(function(){
var product_data = <?php echo $product_implode; ?>;
if(product_data != ''){
jQuery( "#search_box" ).autocomplete({
appendTo: "#project-description",
minLength: 1,
source: product_data,
open: function(e, ui) {
jQuery('#project-description').addClass('autocomplete-content');
},
close: function(e, ui){
jQuery('#project-description').removeClass('autocomplete-content');
}
});
}
});
这是我的自动完成代码。我正在使用 datatables version 1.10.16 来显示数据。我想显示加载程序图像,直到不显示搜索数据。
JQuery 自动完成在加载内容时添加 ui-autocomplete-loading
class。
将以下行添加到 css:
.ui-autocomplete-loading { background:url(http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/smoothness/images/ui-anim_basic_16x16.gif) no-repeat right center }
编辑:
正如@Twisty 所说,如果您在客户端拥有所有数据,那么在显示自动完成时将没有足够的时间来显示正在加载的 gif。
所以你可以用上面提到的 css 添加下面的脚本。参见 Demo
setTimeout(function(){
//logic of fetching data.
}, 1500);
希望这可以帮助您解决问题。
我正在使用 jQuery-ui 自动完成版本 v1.12.1。如何添加加载 GIF?我正在尝试仅使用 jQuery 检索数据...没有 AJAX 调用。
jQuery(document).ready(function(){
var product_data = <?php echo $product_implode; ?>;
if(product_data != ''){
jQuery( "#search_box" ).autocomplete({
appendTo: "#project-description",
minLength: 1,
source: product_data,
open: function(e, ui) {
jQuery('#project-description').addClass('autocomplete-content');
},
close: function(e, ui){
jQuery('#project-description').removeClass('autocomplete-content');
}
});
}
});
这是我的自动完成代码。我正在使用 datatables version 1.10.16 来显示数据。我想显示加载程序图像,直到不显示搜索数据。
JQuery 自动完成在加载内容时添加 ui-autocomplete-loading
class。
将以下行添加到 css:
.ui-autocomplete-loading { background:url(http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/smoothness/images/ui-anim_basic_16x16.gif) no-repeat right center }
编辑:
正如@Twisty 所说,如果您在客户端拥有所有数据,那么在显示自动完成时将没有足够的时间来显示正在加载的 gif。
所以你可以用上面提到的 css 添加下面的脚本。参见 Demo
setTimeout(function(){
//logic of fetching data.
}, 1500);
希望这可以帮助您解决问题。