如何添加一個`加載...`圖標到jQuery UI的自動填充小部件

Question

我試圖修改jQuery's autocomplete widget以在腳本搜索建議時讓輸入的背景顏色發生變化。這是我嘗試（或看看my attempt on jsfiddle）：

HTML

<label for="numbers">Numbers: </label> 
<input id="numbers" /> 

的JavaScript

var numbers = [], 
    nb = 10000, 
    i; 

for (i = 0; i < nb; i += 1) { 
    numbers.push(i.toString()); 
} 

function color (color) { 
    $('#numbers').css({ 
     background: color 
    }); 
} 

$("#numbers").autocomplete({ 
    source: numbers, 
    search: function (event, ui) { 
     console.log('search event fired'); 
     color("red"); 
    }, 
    open: function (event, ui) { 
     console.log('open event fired'); 
     color("green"); 
    }, 
    close: function (event, ui) { 
     console.log('close event fired'); 
     color("white"); 
    } 
}); 

正如你所看到的，我登錄了search，open和close事件，所以我可以看到他們被解僱的時候。

正如預期的那樣，在5（現有值）輸入將觸發事件search並記錄對應的消息，並且，在幾秒鐘後，將觸發事件open和記錄其相應的消息。由於我在那裏放入了10000個條目，因此在search事件和open事件（大約1秒）之間存在明顯的延遲。

讓我感到困惑的是，當出現與search事件關聯的日誌消息時，它不會隨着背景顏色變爲紅色，這應該是預期的。相反，它會一直保持白色，直到open事件發生，然後變爲綠色（如打開事件後的預期）。但是，如果我輸入a（一個不存在的值），背景顏色就會變成紅色而沒有問題（注意在這種情況下永遠不會發生打開事件，因爲沒有找到相應的值）。這裏發生了什麼事？

爲了好奇，我最終試圖在搜索過程中出現一個小小的loading圖標（我感到驚訝的一個功能不隨窗口提供）。背景顏色的變化是朝這個方向邁出的第一步。

UPDATE

我做another attempt這表明後面的指令console.log確實叫，但只出現晚得多的視覺效果。下面是我使用的代碼：

$("#numbers").autocomplete({ 
    source: numbers, 
    search: function (event, ui) { 
     console.log('search event fired'); 
     $('#numbers').css({ 
      marginTop: "5em" 
     }); 
     console.log('search callback done'); 
    } 
}); 

如果你嘗試一下，你會看到，前場被添加上邊距的流離失所兩個消息被記錄。不知何故，保證金是在正確的時間添加的，但頁面並未在正確的時間重新繪製...

Answer 1

那麼，你有沒有試過這個？

$("#numbers").autocomplete({ 
    source: numbers, 
    search: function (event, ui) { 
     console.log('search event fired'); 
     $(this).addClass('working'); 
    }, 
    open: function (event, ui) { 
     console.log('open event fired'); 
     color("green"); 
    }, 
    close: function (event, ui) { 
     console.log('close event fired'); 
     color("white"); 
    } 
}); 

這應該添加一個類到您的文本框。只需添加一個名爲「working」的CSS樣式，並使用紅色背景屬性。

Ref。 jQuery autocomplete: How to show an animated gif loading image

Answer 2

答案很簡單：這不是你的錯:)這是怎麼回事，是瀏覽器的畫基本上是停滯不前，因爲自動完成插件是extemely緩慢的。

要確定速度有多慢以及速度緩慢的原因，您可以使用Chrome Devtool的時間軸選項卡。而在幀模式下，按記錄看圖表如下：

你會看到黃色的條（腳本）上面去酒吧的輪廓的方式，一旦你開始輸入的輸入。這意味着操作無法及時完成，從而導致瀏覽器停滯。您可以查看堆棧跟蹤來確定哪些行確切地說很慢。但問題是可以解決的，但它需要jquery-ui內部知識。

使用這些選項時，前端腳本編寫可能不夠用。你可以用ajax前端查看服務器端搜索，這樣繁重的工作就由服務器完成了。