Question

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

The position is a little left of the text box

The position is around 100px at the bottom of the text box

更新

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

在第二个例子中它是相同的但是＆＃34; top＆＃34; property，-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);
    };

Answer 1

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

＆＃13;

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

＆＃13;

Answer 2

嗯，在阅读jQuery bug ticket关于这个确切的问题后，我再次看了我的CSS课程，发现我已经覆盖了该属性＆＃34; top＆＃34; 100％的价值。删除它，它解决了问题:) :)

Answer 3

如果对问题没有明确的愿景，很难找到解决办法。这可能是一个CSS问题。尝试使用某些开发人员工具查找问题以检查HTML / CSS代码。

适用于Chrome：https://developer.chrome.com/devtools

jQuery UI Autocomplete打开位置

3 个答案: