jQuery Autocomplete plugin 当出现滚动条时不能隐藏弹出层解决方案

使用jQuery Autocomplete来做自动完成时，当设置高度并出现滚动条是，当拖动滚动条后，自动完成层就不能隐藏掉，想了很多方法都不能很好解决此问题，最后当反复研究其源代码时，发现了一个非常简单的解决方法：

当拖动滚动条时：焦点失去，那么在拖动滚动条时，让焦点一直在文本框就很好地解决此问题。

所以要给滚动条添加scroll方法，具体实现如下：

1、找到init()方法

2、找到这段代码：

 

list = $("<ul/>").appendTo(element).mouseover(function (event) {

                if (target(event).nodeName && target(event).nodeName.toUpperCase() == 'LI') {

                    active = $("li", list).removeClass(CLASSES.ACTIVE).index(target(event));

                    $(target(event)).addClass(CLASSES.ACTIVE);

                }

            }).click(function (event) {

                $(target(event)).addClass(CLASSES.ACTIVE);

                select();

                // TODO provide option to avoid setting focus again after selection? useful for cleanup-on-focus

                input.focus();

                return false;

            }).mousedown(function () {

                config.mouseDownOnSelect = true;

            }).mouseup(function () {

                config.mouseDownOnSelect = false;

            });

2、修改上面代码为：

 

 list = $("<ul/>").appendTo(element).mouseover(function (event) {

                if (target(event).nodeName && target(event).nodeName.toUpperCase() == 'LI') {

                    active = $("li", list).removeClass(CLASSES.ACTIVE).index(target(event));

                    $(target(event)).addClass(CLASSES.ACTIVE);

                }

            }).click(function (event) {

                $(target(event)).addClass(CLASSES.ACTIVE);

                select();

                // TODO provide option to avoid setting focus again after selection? useful for cleanup-on-focus

                input.focus();

                return false;

            }).mousedown(function () {

                config.mouseDownOnSelect = true;

            }).mouseup(function () {

                config.mouseDownOnSelect = false;

            }).scroll(function(){

                config.mouseDownOnSelect = false;

                input.focus();

                return false;

            });

问题解决。

主要是添加：

 

scroll(function(){

                config.mouseDownOnSelect = false;

                input.focus();

                return false;

            }

事件，让焦点一直放在input上。

 

转载于： http://blog.tianxiadiyichi.com/PageDetail.aspx?Id=6