如何添加ajax實時搜索旋轉圖標

我已經寫了一個jQuery UI自動完成。我注意到從遠程服務器獲取數據需要時間。因此，爲了讓用戶等待我需要使用Ajax實時搜索圖標進行旋轉。如何添加ajax實時搜索旋轉圖標

問題是我沒有的它是如何工作的IDEAR。

我找到了這段代碼。

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

如何用jQuery UI做到這一點？

來源

2013-08-02 wordpressm

你知道這個頁面上有一個名爲'view source'的鏈接嗎？ – putvande

不是很清楚是什麼問題。通常，這個想法是在請求之前（或啓動時）添加.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的開發者工具來抓住你需要的代碼。在輸入框中點擊右鍵，然後點擊「Inspect Element」，然後再次點擊選中的元素右鍵，你可以選擇「Break on」來斷開這個元素的任何修改。當它打破時，您可以在開發工具的右側找到跟蹤，這將允許您找到執行的代碼。

UPD：在我的回答中，我假設你在正確的目錄中有.gif圖像。如果沒有，您可以通過檢查Google Chrome開發人員工具控制檯（Shift + Ctrl + J）或在開發工具的「網絡」選項卡中查看它嘗試從哪裏加載圖像。

來源

2013-08-02 08:14:56

如果您正確提供圖像路徑，它會自動添加。

有在演示這裏看看：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

你可以看到這個形象，而進入每個之後從服務器獲取數據在文本框中的字符。

來源

2013-08-02 08:48:12 web2008

如何添加ajax實時搜索旋轉圖標

回答

相關問題