jQuery UI Autocomplete打开位置

时间:2014-09-15 05:37:35

标签: css jquery-ui jquery-ui-autocomplete

我甚至不知道如何描述问题,我在我的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时," left" property填充值524.5px,第二次填充533px(然后显示在正确的位置)。

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

3 个答案:

答案 0 :(得分:2)

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

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

答案 1 :(得分:1)

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

答案 2 :(得分:0)

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

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