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

Question

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

jquerycssjquery-uijquery-pluginsautocomplete

23

我正在使用Jquery UI Autocomplete插件来创建一个简单的搜索词建议工具。它已经运行良好，除了我无法移动结果框。我基本上需要将其向左移动20像素并向下移动4像素。我尝试覆盖Jquery UI CSS，但未能重新定位该框。

希望有经验的人能提供帮助，谢谢。

- JP1971

4个回答

23

这可以通过 position 选项来轻松实现，具体来说是通过 offset 属性：

$('#myField').autocomplete({
    source: …,
    position: {
        offset: '20 4' // Shift 20px to the left, 4px down.
    }
});

- jensgram

英雄！我在入侵开放位置之后找到了这个。 - martinedwards

请务必查看此处 http://api.jqueryui.com/position/ 中提供的所有位置选项设置。 - Ben Gripka

18

这样做也可以起作用

open : function(){
        $(".ui-autocomplete:visible").css({top:"+=5",left:"-=2"});
    },

- goksel

完美。这在我使用1.12.1时有效，而位置属性无效。 - ron

对我有用。谢谢。 - Prateek

1

似乎最好使用这些选项

appendTo: "#autocomplete_target_wrapper",
menudocking: {
    menucorner: "right top",
    inputcorner: "right bottom",
    collision: "none"
}

官方链接 https://forum.jquery.com/topic/autocomplete-menu-docking-position

- Savickii Stanislav

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Andrew Whitaker · Accepted Answer

下面是一种方法，通过触发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/