Hiển thị spinner với jQuery-ui tự động hoàn thành

Question

Tôi đã tìm kiếm khắp nơi và không thấy bất kỳ ai làm việc đó - Có thể có một số loại spinner/loader với jQuery UI Autocomplete không? (1.8) trong khi dữ liệu đang được tìm nạp?

Answer 1

Bạn sẽ có thể đặt hình ảnh spinner bên cạnh trường bằng tính năng tự động hoàn tất và ẩn nó ban đầu. Sau đó, sử dụng các chức năng gọi lại để ẩn/hiện nó.

Sau đó sử dụng các tùy chọn tìm kiếm để hiển thị các spinner và cởi mở để ẩn nó:

v1.8 và dưới

$(".selector").autocomplete({ 
    search: function(event, ui) { 
     $('.spinner').show(); 
    }, 
    open: function(event, ui) { 
     $('.spinner').hide(); 
    } 
}); 

v1.9 và lên

$(".selector").autocomplete({ 
    search: function(event, ui) { 
     $('.spinner').show(); 
    }, 
    response: function(event, ui) { 
     $('.spinner').hide(); 
    } 
}); 

Answer 2

lớn js- phiên bản của một spinner: http://fgnass.github.com/spin.js/

Answer 3

Giải pháp của tôi là sử dụng lớp CSS tải tự động hoàn thành. được thêm vào và loại bỏ trên các yếu tố đầu vào trong khi yêu cầu ajax GET đang trong quá trình:

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

Cấp nó không phải là một giải pháp rất linh hoạt vì bạn không thể hiển thị spinner ngoài yếu tố đầu vào nhưng trong trường hợp của tôi nó chính xác UX tôi đang tìm kiếm.

Answer 4

Giải pháp CSS

Nếu các yếu tố tải là một anh chị em ruột của việc kiểm soát đầu vào sau đó CSS ​​chung combinator anh chị em (~) có thể được sử dụng:

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

Working example
Alternate (jQuery) solution

Answer 5

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; 

}