更改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

每次触发自动完成事件时，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/