jQuery UI 水平列表中的自动完成值

Question

我正在使用 jQuery UI 自动完成功能。我完全复制了 jQuery UI 网站 https://jqueryui.com/autocomplete/#default

中的简单示例

<head>     
  <script>
  $( function() {
    var availableTags = [ 'some values here' ];
    $( "#tags" ).autocomplete({
      source: availableTags
    });
  } );
  </script>
</head>
<body>

<div class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags">
</div>

功能正常。但出于某种原因，我的值显示在一个丑陋的框中，值彼此相邻。

我想要您可以在 jQuery UI 网站上看到的漂亮垂直列表中的值。

我认为这不是 CSS 问题，因为即使我从我的网页中删除所有样式，它看起来仍然一样。

知道为什么它在我这边坏了吗？我怎样才能得到漂亮的水平列表？

Answer 1

问题并不像人们预期的那样出现在 <input> 元素中。 jQuery 获取提供的列表并将其转换为 html <ul> 和 <li> 元素。因此，一旦您删除这些元素的 css 格式，自动完成列表将开始正确显示。

Answer 2

建议的外观完全由 CSS 控制。如果您在页面上有一些自己的样式，例如样式 ul 和 li，这可能会导致正好您看到的布局问题。

Here's a JSFiddle，使用与您完全相同的代码，并使用您屏幕截图中的标签，证明了这一点。事实上，它只需要设置样式 li 即可创建您所看到的内容。

一定有一些类似的 CSS 应用到您的页面上，它与 jQuery UI 自己的建议列表样式冲突并被覆盖。你可以通过输入一个字母来生成建议，然后打开浏览器的开发工具，找到生成的 ul - 它会有一个 class ui-autocomplete 来找到它。禁用 display: none 样式，以确保显示它：

现在单击 li 元素，并检查样式。

在我的示例 JSFiddle 中，您可以通过切换 on/off 和 display: inline-block; 查看导致问题的原因，以查看它如何影响建议列表：

jQuery UI 水平列表中的自动完成值

jQuery UI autocomplete values in a horizontal list

jquery

autocomplete