jQuery UI 自动完成打开位置答案

【问题标题】：jQuery UI Autocomplete open positionjQuery UI 自动完成打开位置
【发布时间】：2014-09-15 05:37:35
【问题描述】：

我什至不知道如何描述这个问题，我在我的 web 应用程序上使用 jQuery UI 自动完成功能，由于某种原因，当我在第一次加载页面时输入输入时，ui-widget-content 会打开在错误的位置，如下图所示。我认为这是一个 CSS 问题，但无法解决它应该是哪个属性。在这两个图像上，我使用相同的精确控制。聚焦并返回文本框后，它会在正确的位置自行解析（在两个示例中）

更新

再看开发工具，我看到了不同之处。在第一个示例中，当我第一次打开 ui-autocomplete 时，“left”属性填充了值 524.5px，第二次填充了 533px（然后它显示在正确的位置）。

在第二个示例中它是相同的，但具有“top”属性，-140px 和 199px（此控件在对话框中）。这些属性在 element.style 上（我相信创建控件时它是自动的）

我相信提到的 px 代表正文中自动完成文本框的偏移量，但我怎样才能在第一次运行时将其修复为正确的 px 呢？

**** 仅在 chrome 浏览器上发生 ****

我创建控件的代码是：

$('#service').autocomplete({
        source: function (request, response) {

        },
        select: function (event, ui) {
            event.preventDefault();
            $(this).val(ui.item.label);
        },
        minLength: 2,
    }).data("ui-autocomplete")._renderItem = function (ul, item) {
        var $a = $("<a></a>").text(item.label);
        highlightText(this.term, $a); //THE HIGHLIGHT TEXT FUNCTION I USE
        return $("<li></li>").append($a).appendTo(ul);
    };

【问题讨论】：

标签： css jquery-ui jquery-ui-autocomplete

【解决方案1】：

这是一个 jQueryUI 错误。在 1.9.1 版本中是 fixed，但如果您必须使用旧版本，只需将其应用于您的 CSS：

.ui-autocomplete {
    position: absolute;
    top: 0;
    cursor: default;
}

【讨论】：

【解决方案2】：

好吧，在阅读了jQuery bug ticket 关于这个确切问题之后，我再次查看了我的 CSS 类，发现我已经用 100% 的值覆盖了属性“top”。删除它并解决了问题:) :)

【讨论】：

【解决方案3】：

如果对问题没有清晰的认识，就很难提出解决方案。这可能是一个CSS问题。尝试使用一些开发工具检查 HTML / CSS 代码来查找问题。

对于 Chrome：https://developer.chrome.com/devtools

【讨论】：