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 事件并记录相应的消息，几秒钟后，会触发 打开 事件并记录其相应的消息。由于我在其中放置了 10000 个条目，因此 search 事件和 open 事件之间存在明显的延迟(大约 1 秒)。

令我困惑的是，当与 search 事件关联的日志消息出现时，背景颜色并没有像预期的那样变为红色。相反，它在 open 事件发生之前一直保持白色，然后变为绿色(正如预期的那样，在 open 事件发生后)。但是，如果我输入 a(一个不存在的值)，背景颜色会毫无问题地变成红色(请注意，在这种情况下不会发生打开事件，因为没有找到相应的值)。这里发生了什么？

出于好奇，我最终试图在搜索过程中出现一个小的 loading 图标(令我感到惊讶的是，开箱即用的小部件并未附带此功能) .背景颜色的变化是朝着这个方向迈出的第一步。

更新

我做了 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