如何向 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（一个不存在的值），背景颜色会毫无问题地变为红色（请注意，在这种情况下，open 事件永远不会发生，因为没有找到相应的值）。这里发生了什么？

出于好奇，我最终会尝试在搜索过程中显示一个小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 样式，背景属性为 red。

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

Answer 2

简短的回答：这不是你的错 :) 发生的情况是，浏览器的绘制基本上停止了，因为自动完成插件非常很慢。

要确定速度有多慢以及为什么这么慢，您可以使用 Chrome Devtool 的时间线标签。在帧模式下，按记录可以看到这样的图表：

一旦您开始输入输入，您会看到黄色条（脚本）在条的轮廓上方。这意味着操作无法及时完成，从而导致浏览器停止。您可以查看堆栈跟踪以确定哪些行确实很慢。虽然这个问题是可以解决的，但它需要相当多的 jquery-ui 内部知识。

当使用这么多选项时，前端脚本可能不够用。您可以查看使用 ajax 前端的服务器端搜索，以便由服务器完成繁重的工作。