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

Question

我写了一个 jquery ui 自动完成。我注意到从远程服务器获取数据需要时间。因此，为了让用户等待，我需要使用 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

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

在这里查看演示：演示

.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

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