jQuery UI 水平列表中的自动完成值
jQuery UI autocomplete values in a horizontal list
我正在使用 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 问题,因为即使我从我的网页中删除所有样式,它看起来仍然一样。
知道为什么它在我这边坏了吗?我怎样才能得到漂亮的水平列表?
问题并不像人们预期的那样出现在 <input>
元素中。 jQuery 获取提供的列表并将其转换为 html <ul>
和 <li>
元素。因此,一旦您删除这些元素的 css 格式,自动完成列表将开始正确显示。
建议的外观完全由 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 网站 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 问题,因为即使我从我的网页中删除所有样式,它看起来仍然一样。
知道为什么它在我这边坏了吗?我怎样才能得到漂亮的水平列表?
问题并不像人们预期的那样出现在 <input>
元素中。 jQuery 获取提供的列表并将其转换为 html <ul>
和 <li>
元素。因此,一旦您删除这些元素的 css 格式,自动完成列表将开始正确显示。
建议的外观完全由 CSS 控制。如果您在页面上有一些自己的样式,例如样式 ul
和 li
,这可能会导致 正好 您看到的布局问题。
Here's a JSFiddle,使用与您完全相同的代码,并使用您屏幕截图中的标签,证明了这一点。事实上,它只需要设置样式 li
即可创建您所看到的内容。
一定有一些类似的 CSS 应用到您的页面上,它与 jQuery UI 自己的建议列表样式冲突并被覆盖。你可以通过输入一个字母来生成建议,然后打开浏览器的开发工具,找到生成的 ul
- 它会有一个 class ui-autocomplete
来找到它。禁用 display: none
样式,以确保显示它:
现在单击 li
元素,并检查样式。
在我的示例 JSFiddle 中,您可以通过切换 on/off 和 display: inline-block;
查看导致问题的原因,以查看它如何影响建议列表: