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（一个不存在的值），背景颜色会变为红色而没有问题（注意在这种情况下从不发生打开事件，因为没有找到相应的值）。这里发生了什么？

对于好奇的人，我最终试图在搜索过程中出现一个小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

Answer 2

简短的回答：这不是你的错:)发生的事情是，由于自动完成插件 exmely 慢，浏览器的绘画基本上停滞不前。

要确定速度有多慢以及速度慢，可以使用Chrome Devtool的时间线标签。在帧模式下，按记录查看如下图：

Screenshot of timeline in Devtools

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

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

如何在jQuery UI的自动完成小部件中添加`loading ...`图标

2 个答案: