jquery - 重新定位 Jquery UI 自动完成结果框

Question

我正在使用 Jquery UI 自动完成插件作为直接的搜索词建议工具。它启动并运行没有任何问题，只是我无法移动结果框。我基本上需要将它向左移动 20 个像素并向下移动 4 个像素。我试图覆盖 Jquery UI CSS，但未能重新定位该框。

非常感谢有此问题经验的人提供的任何帮助。

Answer 1

这是您可以做到的一种方法，点击 open 事件并在该事件发生时更改菜单的位置:

$("#autocomplete").autocomplete({
    appendTo: "#results",
    open: function() {
        var position = $("#results").position(),
            left = position.left, top = position.top;

        $("#results > ul").css({left: left + 20 + "px",
                                top: top + 4 + "px" });

    }
});

我还使用 appendTo 选项来轻松找到包含菜单的 ul。不过，您可以在没有此选项的情况下完成此操作。

这是一个工作示例:http://jsfiddle.net/9QmPr/