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

让我感到困惑的是，当与search事件相关的日志消息出现时，它并没有像预期的那样背景颜色变为红色。相反，它在事件发生之前保持白色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

简短的回答：这不是你的错 :) 发生的事情是，由于自动完成插件速度极慢，浏览器的绘制基本上停止了。

要确定速度有多慢以及为什么慢，您可以使用 Chrome Devtool 的时间线选项卡。在帧模式下，按记录查看如下图：

Devtools 中时间线的屏幕截图

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

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

于 2013-06-17T21:09:15.520 回答
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 回答