2

jQuery のオートコンプリート ウィジェットを変更して、スクリプトが候補を検索している間に入力の背景色が変化するようにしようとしています。これが私の試みです（または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で、その後緑になります (open イベントの後で予想どおり)。ただし、a(存在しない値) を入力すると、背景色は問題なく赤くなります (この場合、対応する値が見つからないため、open イベントは発生しないことに注意してください)。ここで何が起こっているのですか？

興味深いことに、私は最終的にloading、検索の進行中に小さなアイコンが表示されるようにしようとしています (驚いたことに、箱から出してすぐにウィジェットに同梱されていない機能がありました)。背景色の変更は、その方向への第一歩です。

アップデート

次の命令が実際に呼び出されることを示す別の試みを行いましたが、視覚効果はずっと後でしか現れません。console.log私が使用しているコードは次のとおりです。

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

試してみると、上部マージンの追加によってフィールドが置き換えられる前に、両方のメッセージがログに記録されることがわかります。どういうわけか、余白は適切なタイミングで追加されますが、ページは適切なタイミングで再描画されていません...

4

2 に答える 2

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 スタイルを追加するだけです。

参考文献 jQuery オートコンプリート: アニメーション GIF 読み込みイメージを表示する方法

于 2013-06-04T23:48:29.697 に答える