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

时间:2013-06-04 15:01:57

标签: javascript combobox jquery-ui-autocomplete

我正在尝试修改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");
    }
});

正如您所看到的,我正在记录searchopenclose事件,以便我们可以看到它们被解雇的时间。

正如所料,输入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');
    }
});

如果您尝试一下,您会看到在通过添加上边距替换字段之前记录这两条消息。不知何故,在合适的时间添加了边距,但是页面没有在正确的时间重新绘制...

2 个答案:

答案 0 :(得分: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

答案 1 :(得分:1)

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

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

Screenshot of timeline in Devtools

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

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