我一直在遍地搜索,只是没有看到任何人这样做 - 是否有某种类型的微调/加载器与jQuery UI自动完成? (1.8)正在提取数据?显示微调jQuery-ui自动完成
17
A
回答
34
你应该能够在自动完成的字段旁边放置一个微调图像,并最初隐藏它。然后使用回调函数来隐藏/显示它。
然后使用搜索选项来显示微调和开放来隐藏它:
V1.8及以下
$(".selector").autocomplete({
search: function(event, ui) {
$('.spinner').show();
},
open: function(event, ui) {
$('.spinner').hide();
}
});
V1.9和高达
$(".selector").autocomplete({
search: function(event, ui) {
$('.spinner').show();
},
response: function(event, ui) {
$('.spinner').hide();
}
});
7
大js-微调版本:http://fgnass.github.com/spin.js/
38
我的解决方案是使用.ui-autocomplete加载CSS类被添加和删除输入元素上,而AJAX GET请求过程:
input[type='text'].ui-autocomplete-loading {
background: url('/icons/loading.gif') no-repeat right center;
}
授予它不是一个非常灵活的解决方案,因为你不能在输入元素之外,但在我的情况下显示的微调是完全UX我正在寻找。
+1
样式。我试过这个,它几乎工作。它将整个背景更改为微调,当背景是不同的颜色时(例如:蓝色背景上的白色文本框),这并不好。我使用了以下内容: .ui-autocomplete-loading {-l}('/ Content/Images/ui-anim_basic_16x16.gif');背景重复:不重复;背景位置:右中心; } – Losbear 2013-12-31 15:15:01
3
CSS解
如果装载元件是输入控制的同级然后CSS一般兄弟组合子(〜)可用于:
.loading {
/* whatever */
}
#autocomplete.ui-autocomplete-loading ~ .loading {
background-image: url(loading.gif);
}
-2
input[type='text'].ui-autocomplete-loading {
background: url('http://www.hsi.com.hk/HSI-Net/pages/images/en/share/ajax-loader.gif') no-repeat
right center;
}
相关问题
- 1. 显示HTML中自动完成jQueryUI的
- 2. jQueryUI自动完成
- 3. jQueryUI的自动完成 - 自定义数据和显示
- 4. asp.NET jqueryUI自动完成
- 5. JqueryUi自动完成问题
- 6. jQueryUI自动完成id值
- 7. jQueryUI自动完成IE5
- 8. JQueryUI自动完成筛选
- 9. JqueryUI自动完成PHP JSON
- 10. jqueryui自动完成后不显示选项
- 11. jqueryUI自动完成菜单显示效果
- 12. jQueryUI - 自动完成不显示与JSON下拉
- 13. jQueryUI在Bootstrap模式下自动完成模态显示
- 14. 如何使jqueryui自动完成实际自动完成?
- 15. jQueryUI自动完成与MVC3:发布自动完成值
- 16. 在jQueryUI自动完成中创建minLength异常自动完成
- 17. jQueryUI自动完成并不真正自动完成
- 18. 移动jQueryUI自动完成位置
- 19. 针对JQueryUI的JSON自动完成 - Rails
- 20. jQueryUI的自动完成射击停止
- 21. jqueryUI自动完成和datalist在一起
- 22. jQueryUI自动完成返回404
- 23. JqueryUI在Rails3中的自动完成
- 24. jqueryui自动完成的建议数量
- 25. jqueryui自动完成与Ajax响应
- 26. jqueryui自动完成限制多选
- 27. JqueryUI自动完成删除结果minLength
- 28. jQueryUI的自动完成:饼干在IE9
- 29. jQueryUI自动完成 - 编码问题
- 30. jQueryUI的自动完成响应数据
作为一个便笺 - 一个伟大的地方为spinners = http: //www.ajaxload.info/ – woolyninja 2010-03-25 21:47:05
该解决方案的问题在于,如果响应包含零结果,则微调控件未隐藏,因为在此情况下未打开事件。控件应该确实有一个“搜索完成”事件被调用,而不管结果数量。规划wiki http://wiki.jqueryui.com/w/page/12137709/Autocomplete引用了这种称为“响应”的事件,但它似乎尚未实现。 – stefann 2011-10-23 01:10:52
Apprently jQuery UI 1.9包含针对此问题的修复http://bugs.jqueryui.com/ticket/6777 – stefann 2011-10-23 01:21:16