显示微调jQuery-ui自动完成

问题描述：

我一直在遍地搜索，只是没有看到任何人这样做 - 是否有某种类型的微调/加载器与jQuery UI自动完成？（1.8）正在提取数据？显示微调jQuery-ui自动完成

答

你应该能够在自动完成的字段旁边放置一个微调图像，并最初隐藏它。然后使用回调函数来隐藏/显示它。

然后使用搜索选项来显示微调和开放来隐藏它：

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(); 
    } 
});

作为一个便笺 - 一个伟大的地方为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

答

大js-微调版本：http://fgnass.github.com/spin.js/

答

我的解决方案是使用.ui-autocomplete加载CSS类被添加和删除输入元素上，而AJAX GET请求过程：

input[type='text'].ui-autocomplete-loading { 
    background: url('/icons/loading.gif') no-repeat right center; 
}

授予它不是一个非常灵活的解决方案，因为你不能在输入元素之外，但在我的情况下显示的微调是完全UX我正在寻找。

样式。我试过这个，它几乎工作。它将整个背景更改为微调，当背景是不同的颜色时（例如：蓝色背景上的白色文本框），这并不好。我使用了以下内容： .ui-autocomplete-loading {-l}（'/ Content/Images/ui-anim_basic_16x16.gif'）;背景重复：不重复;背景位置：右中心; } – Losbear 2013-12-31 15:15:01

答

CSS解

如果装载元件是输入控制的同级然后CSS一般兄弟组合子（〜）可用于：

.loading { 
    /* whatever */ 
} 
#autocomplete.ui-autocomplete-loading ~ .loading { 
    background-image: url(loading.gif); 
}

Working example
Alternate (jQuery) solution

答

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; 

}

显示微调jQuery-ui自动完成

相关推荐