我試圖修改jQuery's autocomplete widget以在腳本搜索建議時讓輸入的背景顏色發生變化。這是我嘗試(或看看my attempt on jsfiddle):如何添加一個`加載...`圖標到jQuery UI的自動填充小部件
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');
}
});
如果你嘗試一下,你會看到,前場被添加上邊距的流離失所兩個消息被記錄。不知何故,保證金是在正確的時間添加的,但頁面並未在正確的時間重新繪製...
http://stackoverflow.com/questions/3843054/jquery-ui-autocomplete-ui-autocomplete-loading – user1477388
http://stackoverflow.com/questions/4489607/jquery-autocomplete-how-to-show-an -animated-gif – user1477388
@ user1477388這些鏈接都沒有被證明有幫助。這是你想到的嗎? http://jsfiddle.net/Shawn/FTP8s/ – Shawn