Question

我写了一个jquery ui auto complete。我注意到从remoteserver获取数据需要时间。因此，为了让用户等待，我需要使用ajax实时搜索图标来旋转。

问题是我没有关于它是如何工作的理想。

我找到了这段代码。

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

如何使用Jquery UI执行此操作？

Answer 1

不是很清楚问题是什么。通常，想法是在请求之前（或在启动时）添加.gif图像，然后在完成后将其删除。例如：

$(".example-search-input").addClass("ui-autocomplete-loading");
$.ajax({
//request
}).done(function() {
    $(".example-search-input").removeClass("ui-autocomple-loading");
});

在您的特定情况下，使用文件jquery-ui.js中的此代码完成：

search: function( value, event ) {
    value = value != null ? value : this._value();

    // always save the actual value, not the one passed as an argument
    this.term = this._value();

    if ( value.length < this.options.minLength ) {
        return this.close( event );
    }

    if ( this._trigger( "search", event ) === false ) {
        return;
    }

    return this._search( value );
},

_search: function( value ) {
    this.pending++;
    this.element.addClass( "ui-autocomplete-loading" );
    this.cancelSearch = false;

    this.source( { term: value }, this._response() );
},

_response: function() {
    var that = this,
        index = ++requestIndex;

    return function( content ) {
        if ( index === requestIndex ) {
            that.__response( content );
        }

        that.pending--;
        if ( !that.pending ) {
            that.element.removeClass( "ui-autocomplete-loading" );
        }
    };
},

提示：您可以使用Chrome的开发人员工具来捕获所需的代码。单击输入字段上的右键，然后单击“检查元素”，然后再次单击所选元素右键，您可以选择“中断”以使其在此元素的任何修改上中断。当它处于中断状态时，您可以在开发工具的右侧找到跟踪，这将允许您查找执行的代码。

UPD：在我的回答中，我假设您将.gif图像放在正确的目录中。如果没有，您可以通过查看Google Chrome开发者工具控制台（Shift + Ctrl + J）或开发工具的“网络”标签，查看其尝试加载图片的位置。

Answer 2

如果您正确地提供图像路径，则会自动添加。

请在此处查看演示：Demo

.ui-autocomplete-loading {
background: white url('http://jquerymobile.com/demos/1.2.0/css/themes/default/images/ajax-loader.gif') right center no-repeat;
}
#city { width: 25em; }

我给出了以下图像路径：

http://jquerymobile.com/demos/1.2.0/css/themes/default/images/ajax-loader.gif

在文本框中输入每个字符后，您可以在从服务器检索数据时看到此图像。

如何添加ajax实时搜索旋转图标

2 个答案: