更改jQuery UI自动完成结果框样式

Question

我是jQuery的新手，正在尝试弄清楚如何更改样式。 我有一个文本框，当输入该文本框时，会使用在框中键入的字符向我的服务器发送AJAX API请求-我返回世界上所有具有字符子字符串的匹配城市的列表，该列表为显示。 没有列表的文本框如下所示：

以及当前列表的显示方式（我输入了字符'santa'）：

以及我希望列表显示的方式（在实时页面上调整HTML之后）：

我为了使页面看起来像这样而调整的HTML来自：

<ul class="ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all" role="listbox" aria-activedescendant="ui-active-menuitem" style="z-index: 1; top: 0px; left: 0px; display: none;">...</ul>

至：

<ul class="ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all" role="listbox" aria-activedescendant="ui-active-menuitem" style="z-index: 1; top: 30px; left: 100px; display: none;">...</ul>

我正在努力正确使用HTML样式标签，主要是因为我正在努力选择正确的元素。 我尝试了以下两个样式选择器，但均未成功：

<style>
<!--- other styles defined above ---!>
    .cities_list {
        z-index: 1;
        top: 30px;
        left: 100px;
    }
    ul.ui-autocomplete.ui-menu.ui-widget.ui-widget-content.ui-corner-all {
        top: 30px;
        left: 100px;
        z-index: 1;
    }
</style>

在选择方面，我不了解什么？ 谢谢你的帮助！

Answer 1

每次触发自动完成事件覆盖您的CSS时，jQuery ui-autocomplete均可重置其下拉位置。

您可以在每次触发打开功能时设置偏移量：

$('.ui-autocomplete').css('top', $("ul.ui-autocomplete").cssUnit('top')[0] + 30);
$('.ui-autocomplete').css('left', $("ul.ui-autocomplete").cssUnit('left')[0] + 100);

参见小提琴https://jsfiddle.net/t7xo8qvs/