我正在尝试修改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');
}
});
如果您尝试一下,您会看到在通过添加上边距替换字段之前记录这两条消息。不知何故,在合适的时间添加了边距,但是页面没有在正确的时间重新绘制...
答案 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的时间线标签。在帧模式下,按记录查看如下图:
一旦你开始输入输入,你会看到黄色条(Scripts)在条形轮的上方。这意味着操作无法及时完成,从而导致浏览器停止运行。您可以查看堆栈跟踪以确定哪些行确实非常慢。虽然这个问题是可以解决的,但它需要对jquery-ui内部有一些了解。
使用这么多选项时,前端脚本可能还不够。您可以使用ajax前端查看服务器端搜索,以便服务器完成繁重的工作。