javascript - 如何将 `loading...` 图标添加到 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 (一个不存在的值)，背景颜色会毫无问题地变为红色(请注意，在这种情况下，打开事件永远不会发生，因为没有找到相应的值)。这里发生了什么？

出于好奇，我最终尝试在搜索进行时显示一个小正在加载图标(令我惊讶的是，开箱即用的小部件并未附带此功能) 。背景颜色的变化是朝这个方向迈出的第一步。

更新

我做了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 样式，背景属性为红色。

引用号。 jQuery autocomplete: How to show an animated gif loading image