单击滚动条时自动完成选择元素答案

【问题标题】：Autocomplete selecting an element when clicking in scrollbar单击滚动条时自动完成选择元素
【发布时间】：2010-02-22 12:06:58
【问题描述】：

我对 IE7 或 IE8 中的 jquery.ui.autocomplete 1.8 rc2 有问题，使用以下 CSS（在 jquery.ui.autocomplete.css 内）：

.ui-menu {
      list-style:none;
      padding: 2px;
      margin: 0;display:block;
      height:200px; 
      overflow:scroll;
      }

我正在使用项目中的演示：demos\autocomplete\remote-jsonp.html

它与 Firefox 完美搭配，但在 IE7 或 8 上，每次我点击滚动条查看列表末尾时，它都会选择一个元素而不是向下滚动。

您是否有一个解决方案，让jquery.ui.autocomplete 具有固定高度和使用 IE 的滚动条？

【问题讨论】：

更新：如果我在 jquery.ui.autocomplete.js 的 .bind("blur.autocomplete", function( event) ...当然不再是菜单了....但是这种行为对用户来说更好。
试试这个解决方案：http://forum.jquery.com/topic/setting-height-on-autocomplete#14737000000891166

标签： jquery jquery-ui autocomplete

【解决方案1】：

当滚动条用于自动完成时，我遇到了同样的问题。当我/用户使用滚动条按钮时 - 自动完成列表会自动隐藏。仅供参考：测试是在 FF3.5 中

所以我评论说快速解决方案 bind("blur.autocomplete", function( event ) ... in jquery.ui.autocomplete.js 这解决了这个问题。

【讨论】：

【解决方案2】：

此错误已在 JQuery 1.8.2 版本中修复。

如果你不能升级到 1.8.2，这个 hack 对我有用：

    $("body").click(function () {
        HideAutoCompleteHack();                
    });

    $(document).keyup(function (e) {
        if (e.keyCode == 27) { //esc
            HideAutoCompleteHack();
        }
    });

    function HideAutoCompleteHack() {
        $(".ui-autocomplete").hide();
    }

【讨论】：

【解决方案3】：

改用最大高度。

.ui-autocomplete { 
    max-height: 250px; overflow-y: auto; overflow-x: hidden;
}
* html .ui-autocomplete { 
     height: expression( this.scrollHeight > 250 ? "250px" : "auto" ); /* sets max-height for IE */ 
}

【讨论】：

【解决方案4】：

好吧，我花了近 20 小时的时间在 IE 和 Chrome 上完成了这项工作。这是完成的 -> 不解绑模糊事件 -> 无需从 jquery 1.4.2 迁移到更新版本（1.4.3/1.4.4），考虑到我的项目规模，这是一个风险

我在我的 1.4.2 库中对 jquery.ui.autocomplete.js 做了一些最小的更改。这些更改是从最新版本的 jquery.ui.autocomplete.js 复制而来的。我附上了对我有用的 jquery.ui.autocomplete_modified.zip。下载文件后请将.zip扩展名更改为.js。

PS：不要在旧库中直接使用较新版本的 jquery.ui.autocomplete.js ，那是行不通的。它显示了一些“强”的 html 标记以及下拉内容。

文件附在此处
http://forum.jquery.com/topic/setting-height-on-autocomplete#14737000001747027

问候，
达山收银
shroffdarshan@gmail.com

【讨论】：

【解决方案5】：

只要增加 'ac_results' 的宽度，它就会隐藏 y-overflow

.ac_results ul {
width: 180px;
/* 
increase width to hide overflow
*/
list-style-position: outside;
list-style: none;
padding: 0;
margin: 0;

}

【讨论】：